Static Pages

Rendering the whole page on the server

Open Live Example

Full Example Source

If you don't need interactivity (beyond what HTML gives you) in the things you render, you can probably render your entire UI on the server.

In next.js, any component that isn't labeled 'use client' is a server component by default, so as long as your layout.tsx, page.tsx and component/XYZ.tsx are not declaring 'use client', your entire UI will be rendered on the server:

layout.tsx
export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

//this is a synchronous server component
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Our page.tsx is declared async in this case so that we can load data via await, but it could be a synchronous function too:

page.tsx
import MyComponent from './component'
import { loadProductData } from './data'

export default async function Page() {
  const data = await loadProductData()

  return (
    <div>
      <h1>My RSC-powered store</h1>
      <h2>{data.name}</h2>
      <p>{data.description}</p>
      <MyComponent />
    </div>
  )
}

Here's what the fake database call looks like:

data.tsx
// Simulates fetching product data from a database/API
export async function loadProductData(
  delay = 20,
): Promise<{ name: string; price: number; description: string }> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: 'Product Name',
        price: 100,
        description: 'This is a product description',
      })
    }, delay)
  })
}

This is the other sub-component that we render inside Page - obviously you can compose together as many components as you like. If none of them us 'use client', the whole thing will be rendered on the server.

component.tsx
export default function MyComponent() {
  return <p>This is MyComponent, which renders on the server</p>
}

Live Demo

This example can't be easily inlined as it demonstrates how a full-page feels to the end user. Here it is inside an iframe, and there's a looping video below too.

Click here to test it out yourself

This is an iframe pointing to /examples/static-pages/server-only

Video Preview

In case the iframe doesn't work for some reason, this is a looping video of what you would see. Click the video to open the full page example in a new tab.

Similar Examples

Previous
Examples Gallery
Next
Server & Client components