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 :

git clone https://github.com/Mk4Levi/Server-Side-Rendering-React.git

3. Navigate to the Project's directory :

cd Server-Side-Rendering-React

4. Install all Dependencies used in this Project :

npm install

5. Run Build for the Client-Side :

npm run build:client

6. Run Build for the Server-Side :

npm run build:server

7. Finally, host it on local server :

npm run start

8. Now just search this link in your browser to view the live running application in your Local sysytem :

http://localhost:3001

Paths & Files

Structure of the Folders & Files in this Repo :

.
├── 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