Rendering

Framework Next.js 13 Rendering
Categories:
Tags:

Rendering third-party context providers in Server Components

createContext only works in Client Components. Add the “use client” directive at the top of the file to use it.

If you try to render a third-party provider that doesn’t have “use client”, it will cause an error:

// app/NextThemeProvider.js
'use client';

import { ThemeProvider } from 'next-themes';

export function NextThemeProviders({ children }) {
  return (
    <ThemeProvider>
      {children}
    </ThemeProvider>
  );
}

// app/layout.js
import './globals.css'
import { NextThemeProviders } from './NextThemeProvider'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextThemeProviders attribute="class">
          {children}
        </NextThemeProviders>
      </body>
    </html>
  )
}

Component-level Client and Server Rendering

By default, the app directory uses Server Components

Reducing the amount of JavaScript sent to the client. Large dependencies that previously would impact the JavaScript bundle size on the client

Server Components make writing a React application feel similar to PHP or Ruby on Rails, but with the power and flexibility of React for templating UI.

Component-level Client and Server Rendering

dynamic functions

Dynamic functions rely on information that can only be known at request time such as a user's cookies, current requests headers, or the URL's search params. In Next.js, these dynamic functions are:

Function Description
cookies() Allows you to read the HTTP incoming request cookies from a server component.
headers() Allows you to read the HTTP incoming request headers from a server component.
useSearchParams() Allows you to read the current URL's query string.

dynamic functions and static data fetching (caching) affect

Data Fetching Is use dynamic functions Rendering
Cached No Static
Cached Yes Dynamic
Not Cached No Dynamic
Not Cached Yes Dynamic

Reference