NextJs | Notion

Next.js is an open-source React-based web development framework that enables developers to build server-side rendered (SSR) React applications with ease.
It was created by Zeit and is now maintained by Vercel.
Next.js provides a variety of features that make building React-based applications a breeze, including server-side rendering, automatic code splitting, static site generation, and more.
One of the key benefits of Next.js is its ability to provide server-side rendering out of the box. This means that your web pages can be rendered on the server before being sent to the client, providing faster page load times and better SEO.
Additionally, Next.js supports automatic code splitting, enabling developers to deliver code that is optimized for each user's device and network speed.
Another feature of Next.js is static site generation (SSG), which allows you to pre-render your pages at build time.
This can lead to even faster load times and better SEO, as the pre-rendered pages can be cached and served to users quickly.

Overall, Next.js is a powerful tool for building React-based applications with server-side rendering, automatic code splitting, and static site generation built-in.

It is a popular choice among developers and is used by companies such as Twitch, Hulu, and Lyft.

Topics to Learn -

App Routing
Server Side rendering and client side rendering
Data fetchingeNextJs • For Backend ◦ You can use API ROUTES ◦ Server actions • CSR → Client side rendering ◦ In. CSR is a technique in which rendering of the web page occurs on the client side rather than server Client-Side Rendering (CSR) is a technique in which the rendering of a web page occurs on the client side (in the browser) using JavaScript, rather than on the server. React.js primarily operates in CSR mode by default. How CSR Works
1. Initial Request: ▪ The browser makes an HTTP request to the server. ▪ The server responds with a minimal HTML file containing a <div> element (commonly with an id="root") and a link to the JavaScript bundle.

html Copy code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React App</title> </head> <body> <div id="root"></div> <script src="/static/js/main.js"></script> </body> </html>

2. **JavaScript Execution**:
    ▪ After the minimal HTML is loaded, the browser fetches the JavaScript bundle (typically generated by tools like Webpack or Vite).
    ▪ React takes over the `<div id="root">` and dynamically renders the components defined in your React application.
3. **Dynamic Rendering**:
    ▪ React constructs and manipulates the DOM based on the React component tree.
    ▪ It updates the DOM efficiently using its **Virtual DOM** mechanism.

Advantages of CSR 1. Rich User Interactions:

    ▪ React dynamically updates the UI based on user actions without requiring a page reload.
    ▪ Great for Single Page Applications (SPAs).
2. **Efficient UI Updates**:

    ▪ React uses the Virtual DOM to minimize direct DOM manipulations, improving performance.
3. **Front-End State Management**:

    ▪ CSR is well-suited for managing complex state on the client side, using tools like Redux, Zustand, or Context API.
4. **Reduced Server Load**:

    ▪ Since the rendering happens in the browser, the server only needs to serve static files (HTML, JS, CSS), reducing its workload.

Disadvantages of CSR 1. Initial Load Time:

    ▪ Users must wait for the JavaScript to download and execute before they can see the content.
    ▪ This can impact performance, especially on slower networks or devices.
2. **SEO Challenges**:

    ▪ Search engines may have difficulty crawling CSR-based applications because the content is not included in the initial HTML.
3. **Dependency on JavaScript**:

    ▪ If JavaScript is disabled in the browser, the application may not work at all.

When to Use CSR CSR is ideal for applications where: ◦ Interactivity is a priority (e.g., dashboards, social media platforms). ◦ SEO is not critical (or can be managed using tools like React Helmet or Prerendering). ◦ You want to build SPAs with fast client-side routing and state management. Optimizing CSR To improve performance and address SEO issues, you can combine CSR with other techniques: 1. Code Splitting:

    ▪ Use tools like React's `React.lazy` and `Suspense` to load components on demand.
2. **Server-Side Rendering (SSR)** or **Static-Site Generation (SSG)**:

    ▪ Use frameworks like Next.js to generate initial content on the server.
3. **Lazy Loading**:

    ▪ Load assets (e.g., images, components) only when they are needed.
4. **Pre-rendering**:

    ▪ Use tools like **React Snap** or [**Prerender.io**](<http://prerender.io/>) to generate static HTML for better SEO.

• SSR → Side side rendering ◦ Next.js is a React framework that provides built-in support for Server-Side Rendering (SSR). With SSR, pages are pre-rendered on the server at request time, ensuring the HTML sent to the browser is fully rendered. How SSR Works in Next.js 1. Request:

    ▪ When a user visits a page, Next.js handles the request on the server.
2. **Server-Side Execution**:

    ▪ The server runs the React components for the requested page, fetches necessary data, and renders the HTML.
3. **Response**:

    ▪ The server sends the fully-rendered HTML to the client.
    ▪ Once the page is loaded, the React app is hydrated, making it interactive.

• SSG → Static Static generation Static Site Generation (SSG) in Next.js Static Site Generation (SSG) is a pre-rendering technique in Next.js where HTML pages are generated at build time. These pages are served as static files, ensuring fast load times and improved performance. SSG is ideal for pages where content doesn’t change frequently. How SSG Works

Build Time:

◦ When you run the next build command, Next.js generates static HTML files for all pages that use SSG.
Serving the Files:

◦ These pre-rendered HTML files are served directly to the client without requiring a server to dynamically generate them on each request.
Static Files:

◦ The generated pages are stored on a Content Delivery Network (CDN), ensuring low-latency delivery. Implementing SSG in Next.js To use SSG, define the getStaticProps function in your page. This function runs at build time and fetches the data needed for the page. Example: SSG in a Next.js Page

`export async function getStaticProps() { // Fetch data from an API or database const res = await fetch('https://api.example.com/posts'); const posts = await res.json();

return {
    props: { posts }, // Pass data to the page component as props
};

}

const BlogPage = ({ posts }) => { return ( <div> <h1>Blog Posts</h1> <ul> {posts.map(post => ( <li key={post.id}>{post.title}</li> ))} </ul> </div> ); };

export default BlogPage;`

Key Features of SSG

Runs Only at Build Time:

◦ getStaticProps runs during the build process, not on the server or client at runtime.
Fast Load Times:

◦ Pre-rendered HTML is delivered to users directly, ensuring minimal latency.
No Server Dependency:

◦ Once the HTML is generated, you don't need a server to dynamically render content.
Rehydration:

◦ After loading the static HTML, React "hydrates" the page, attaching event listeners to make it interactive. • ISR → Incremental Static regeneration • Server components are rendered only rendered at the server side, but the client components are first pre rendered at the server side and then rendered at the client.

◦ This is called Server side Pre rendering ◦ Once the pre-rendered HTML is delivered to the browser, React’s hydration process takes place. During hydration: ◦ Interactive Features:
```
 ▪ The pre-rendered HTML becomes interactive by attaching event listeners, state management, and other JavaScript logic.
```

• Grouped routing, error and loading

◦ (root)

    ▪ page.tsx
    ▪ layout.tsx
◦ (dashboard)

    ▪ users.tsx
    ▪ settings.tsx
    ▪ layout.tsx
◦ global-error.tsx
◦ loading.tsx

meta data • Static meta data

◦ Global static meta data: For all the pages use the size meta data
◦ Page specific:Change the content of the meta data based on the route

• Dynamic content meta data: •

![Screenshot 2024-11-23 at 1.12.43 AM.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/ee792269-63cd-4577-83e4-653f057cfe34/c88f1a0c-e28f-468e-920a-b9d75760ee2b/Screenshot_2024-11-23_at_1.12.43_AM.png>)

23 Nov 2024 • In App route all the components are by default server components How does the flow looks like when there is a Client Component inside a server component.

`const Product = async()=>{ const products = await fetch(); return <main> {products.map(e)=>{ <div> {e.title} </div> }} <AddtoCart/> </main>

• The server will first call the fetch method • The server component’s HTML fils i generated • Then the client component’s Partial HTML is generated. • Then the server component html + client component partial HTML is sent to the client

Browser requests /product/123
Server:

◦ Executes ProductPage ◦ Runs database queries ◦ Generates HTML for ProductDetails ◦ Generates initial HTML for AddToCart and ReviewForm ◦ Sends complete HTML to browser
Browser:

◦ Displays complete HTML immediately ◦ Loads JS for client components ◦ Hydrates AddToCart and ReviewForm ◦ Server component HTML remains static ◦ Client components become interactive
After Hydration:

◦ ProductDetails stays static (server) ◦ AddToCart, ReviewForm are fully interactive ◦ Can update state, handle events ◦ Can make API callsNextJs • For Backend ◦ You can use API ROUTES ◦ Server actions • CSR → Client side rendering ◦ In. CSR is a technique in which rendering of the web page occurs on the client side rather than server Client-Side Rendering (CSR) is a technique in which the rendering of a web page occurs on the client side (in the browser) using JavaScript, rather than on the server. React.js primarily operates in CSR mode by default. How CSR Works
1. Initial Request: ▪ The browser makes an HTTP request to the server. ▪ The server responds with a minimal HTML file containing a <div> element (commonly with an id="root") and a link to the JavaScript bundle.

2. **JavaScript Execution**:
    ▪ After the minimal HTML is loaded, the browser fetches the JavaScript bundle (typically generated by tools like Webpack or Vite).
    ▪ React takes over the `<div id="root">` and dynamically renders the components defined in your React application.
3. **Dynamic Rendering**:
    ▪ React constructs and manipulates the DOM based on the React component tree.
    ▪ It updates the DOM efficiently using its **Virtual DOM** mechanism.