shaban-eissa/next.js-partial-rendering

Partial Prerendering – an experimental feature that allows you to render a route with a static loading shell, while keeping some parts dynamic. In other words, you can isolate the dynamic parts of a route.

Next.js Partial Rendering

Demo built with Next.js using partial rendering experimental feature with Suspense API.

Table of Contents

• Features
• Demo
• Installation
• Technologies Used
• Contributing

Features

• Partial Rendering: Allow to render rest of the page in same time an heavy operations is happening like fetching data from server and display fallback UI until data is fetched.

Demo

Next.js.Partial.Hydration.Example.mp4

Installation

1. Clone the repository:

   git clone https://github.com/Shaban-Eissa/Next.js-Partial-Rendering

2. Install dependencies:

   cd Next.js-Partial-Rendering
   npm install

3. Run the application:

   npm run dev

   The application will be accessible at http://localhost:3000.

Technologies

This project utilizes a robust stack of modern technologies for efficient development and optimal user experience:

• Next.js
• Typescript
• Partial Rendering
• Tailwind CSS

Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository.
2. Create a new branch for your feature/bugfix: git checkout -b feature-name.
3. Commit your changes: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature-name.
5. Open a pull request.