Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mk4levi/server-side-rendering-react
It is a dynamic web application that incorporates Server-Side-Rendering (SSR). By rendering components on the server before sending them to the client, it ensures faster initial page loads and improves search engine optimization.
https://github.com/mk4levi/server-side-rendering-react
expressjs javascript react-effects react-query react-states reactjs server server-side-rendering
Last synced: 10 days ago
JSON representation
It is a dynamic web application that incorporates Server-Side-Rendering (SSR). By rendering components on the server before sending them to the client, it ensures faster initial page loads and improves search engine optimization.
- Host: GitHub
- URL: https://github.com/mk4levi/server-side-rendering-react
- Owner: Mk4Levi
- Created: 2023-07-14T08:15:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-21T22:39:55.000Z (3 months ago)
- Last Synced: 2024-10-07T09:23:29.378Z (about 1 month ago)
- Topics: expressjs, javascript, react-effects, react-query, react-states, reactjs, server, server-side-rendering
- Language: JavaScript
- Homepage: https://adopt-pet-mk.vercel.app
- Size: 2.06 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Server-Side-Rendering in React-App
## => Adopt-Pet-SSR is a dynamic web application that incorporates Server-Side-Rendering (SSR). By rendering components on the server before sending them to the client, it ensures faster initial page loads and improves search engine optimization. Experience the benefits of server-side rendering in this innovative React project.
## Website Link => https://adopt-pet-mk.vercel.app/
## Project's Screenshots =>
Getting Started
1. To get started with this project, you will need to have `Node.js` and `NPM` installed on your system.
2. First, you need to open a `Terminal` in your system and `Clone` this repository by using :
```bash
git clone https://github.com/Mk4Levi/Server-Side-Rendering-React.git
```
3. Navigate to the Project's directory :
```bash
cd Server-Side-Rendering-React
```
4. Install all Dependencies used in this Project :
```bash
npm install
```
5. Run Build for the Client-Side :
```bash
npm run build:client
```
6. Run Build for the Server-Side :
```bash
npm run build:server
```
7. Finally, host it on local server :
```bash
npm run start
```
8. Now just search this link in your browser to view the live running application in your Local sysytem :
```bash
http://localhost:3001
```
Paths & Files
### Structure of the Folders & Files in this Repo :
```text
.
├── public/
├── src
│ ├── assets/
│ ├── components/
| └── App.jsx
| └── Carousel.jsx
| └── Details.jsx
│ └── ErrorBoundary.jsx
│ └── Modal.jsx
│ └── Pet.jsx
| └── Results.jsx
│ └── SearchParams.jsx
│ └── fetchBreedList.js
│ └── fetchPet.js
│ └── fetchSearch.js
│ └── useBreedList.js
│
│ ├── contexts/
| └── AdoptedPetContext.jsx
│
│ ├── css/
│ └── style.css
|
│ ├── index.jsx
| ├── index.html
│ ├── vercel.json
│
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── vite.config.js
```
# Thank You