search

phymooc / learn-react

0 stars 0 forks source link

Next.js Rendering #7

Open phymo opened 1 month ago

phymo commented 1 month ago

Server Components

Static Rendering (default): means SSG?

Dynamic Rendering: means SSR?

During rendering, if a dynamic function or uncached data request is discovered, Next.js will switch to dynamically rendering the whole route. Next.js will automatically choose the best rendering strategy for each route based on the features and APIs used. Instead, you choose when to cache or revalidate specific data, and you may choose to stream parts of your UI.

Streaming: same as routing section

image

phymo commented 1 month ago

Client Components

To use Client Components, you can add the React "use client" directive at the top of a file, above your imports. by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle.

"use client" doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle.

1. full page load

To optimize the initial page load, Next.js will use React's APIs to render a static HTML preview on the server for both Client and Server Components.

Hydration is the process of attaching event listeners to the DOM, to make the static HTML interactive. Behind the scenes, hydration is done with the hydrateRoot React API.

2. Subsequent Navigations

On subsequent navigations, Client Components are rendered entirely on the client, without the server-rendered HTML. This means the Client Component JavaScript bundle is downloaded and parsed. Once the bundle is ready, React will use the RSC Payload to reconcile the Client and Server Component trees, and update the DOM.

phymo commented 1 month ago

Compostion Patterens

1. summary: server component vs client component

image

2. server component patterns

  1. share data between components:
    • React Context not available on server
    • use fetch or React's cache: React extends fetch to automatically memoize data requests, and the cache function can be used when fetch is not available.
    • npm install server-only : import 'server-only' to prevent code executed on client
    • third-party packages may can only used in client: use a wrapper with use client, then use the wrapper in server component
    • providers rely on React State and context: To fix this, create your context and render its provider inside of a Client Component: 
      
'use client'

import { createContext } from 'react'

export const ThemeContext = createContext({})

export default function ThemeProvider({ children, }: { children: React.ReactNode }) { return {children}</ThemeContext.Provider> }

> Good to know: You should render providers as deep as possible in the tree – notice how ThemeProvider only wraps {children} instead of the entire <html> document. This makes it easier for Next.js to optimize the static parts of your Server Components.

### 3. client component patterns
1. Moving Client Components Down the Tree: wrap less & reduce client bundle size
2. Passing props from Server to Client Components (Serialization)

### 4. interleaving server & client components
1. use client component inside server component
2. use server component inside client component:
    - Unsupported Pattern: Importing Server Components into Client Components
    - Supported Pattern: Passing Server Components to Client Components as Props
``` tsx
// app/page.tsx
// This pattern works:
// You can pass a Server Component as a child or prop of a
// Client Component.
import ClientComponent from './client-component'
import ServerComponent from './server-component'

// Pages in Next.js are Server Components by default
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

The pattern of "lifting content up" has been used to avoid re-rendering a nested child component when a parent component re-renders. You're not limited to the children prop. You can use any prop to pass JSX.

phymo commented 1 month ago

Edge and Node.js Runtimes

On the server, there are two runtimes where parts of your application code can be rendered: