Published on

Next.js SSR: How to Build Server-Rendered Apps in 10 Minutes

Next.js is a powerful React framework that allows you to build high-performance websites using Server-Side Rendering (SSR - a technique where the server generates the HTML for a page before sending it to the user). By using SSR, you can reduce initial page load times by up to 50% compared to traditional client-side apps, while significantly improving your search engine visibility. You can set up your first Next.js project and deploy a live server-rendered page in less than 10 minutes using standard terminal commands.

Why is server-side rendering better for beginners?

When you build a standard React app, the user's browser has to do all the heavy lifting. The browser downloads a blank HTML file, fetches the JavaScript, and then builds the page piece by piece. This often results in a "flicker" where the screen is empty for a split second.

Server-Side Rendering changes this by doing the work on the server first. The server prepares the full HTML content and sends it directly to the browser. This means the user sees your content almost instantly, even if they have a slow internet connection.

This approach is also vital for SEO (Search Engine Optimization - making your site easy for Google to find). Since the HTML is already there when a search engine "crawls" your site, your content gets indexed much faster. We've found that this shift from client-side to server-side is the single biggest factor in making a web app feel professional and snappy.

What do you need to get started?

Before writing any code, you need to ensure your computer has the right environment. Because Next.js runs on a server, it requires a runtime (a program that executes code outside of a web browser).

  • Node.js (Version 24 LTS or higher): This is the core engine that runs JavaScript on your machine. You can download it from the official Node.js website.
  • A Code Editor: Visual Studio Code is the industry standard for 2026.
  • Terminal Access: You will use the Command Prompt, Terminal, or PowerShell to run setup commands.

To check if you are ready, open your terminal and type node -v. If it returns a version number like v24.x.x, you are ready to proceed. Don't worry if the number is slightly higher; that just means you have a newer update.

How do you create your first Next.js project?

Next.js provides a specialized tool called create-next-app that handles all the complex configuration for you. In 2026, this tool uses Turbopack (a high-speed replacement for Webpack that makes your development environment start instantly) by default.

Step 1: Run the installation command Open your terminal and type the following command:

npx create-next-app@latest my-ssr-project

Step 2: Choose your settings The terminal will ask you a series of questions. For a beginner-friendly setup in 2026, choose these options:

  • Would you like to use TypeScript? Yes
  • Would you like to use ESLint? Yes
  • Would you like to use Tailwind CSS? Yes
  • Would you like to use src/ directory? Yes
  • Would you like to use App Router? Yes (This is the modern standard)
  • Would you like to customize the default import alias? No

Step 3: Navigate to your folder Once the installation finishes, move into your new project folder:

cd my-ssr-project

What you should see: A folder structure will appear in your code editor. You will see a src folder containing an app folder, which is where all your pages will live.

How does the App Router handle rendering?

The App Router is the system Next.js uses to manage your website's pages and data. In 2026, every file you create inside the app folder is a Server Component by default.

A Server Component is a piece of code that stays on the server and never gets sent to the user's browser. This keeps your website lightweight because the user doesn't have to download the logic used to generate the page.

When a user requests a page, the App Router calculates what the HTML should look like. It then streams that HTML to the browser. If you need a button to be interactive (like a "Like" button), you simply add a small "Client Component" inside your server-rendered page.

How do you create a server-rendered page?

Let's build a simple page that fetches data from a server and displays it. We will use the page.tsx file located in src/app/.

Step 1: Open the file Locate src/app/page.tsx and delete everything inside it. Replace it with this code:

// This is a Server Component by default in Next.js 16/17
export default async function HomePage() {
  // We are fetching data directly inside the component
  const response = await fetch('https://api.quotable.io/random');
  const data = await response.json();

  return (
    <main style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
      <h1>My First SSR Page</h1>
      <p>This quote was fetched on the server:</p>
      {/* This content is rendered before it reaches your browser */}
      <blockquote style={{ fontStyle: 'italic', fontSize: '1.5rem' }}>
        "{data.content}"
      </blockquote>
      <p>- {data.author}</p>
    </main>
  );
}

Step 2: Start the development server Go back to your terminal and run:

npm run dev

Step 3: View your site Open your browser and go to http://localhost:3000. You will see a random quote on the screen.

What you should see: If you right-click the page and select "View Page Source," you will see the actual text of the quote inside the HTML code. This proves the server did the work, as a traditional React app would only show an empty <div> tag in the source code.

What are the common gotchas for beginners?

It is normal to feel a bit confused when your code doesn't behave as expected. Here are a few things to watch out for as you build.

  • The "use client" error: If you try to use a feature like useState (a tool to track data changes on the screen) or useEffect, Next.js will throw an error. This is because Server Components cannot use browser-only features. To fix this, add the text 'use client'; at the very top of your file.
  • Data Caching: Next.js is very smart and likes to remember (cache) data to stay fast. If your data isn't updating when you refresh, it's likely because the server is showing you a saved version of the page. You can fix this by adding { next: { revalidate: 0 } } to your fetch request.
  • Terminal Crashes: If your terminal shows a red error message, don't panic. Most of the time, it's a simple typo or a missing bracket. Read the error message carefully; it usually tells you exactly which line of code is broken.

Next Steps

Now that you have a basic server-rendered page running, you can experiment by adding more pages. Simply create a new folder inside src/app (like about) and put a page.tsx file inside it. Next.js will automatically create a new URL at localhost:3000/about.

You might also want to explore Tailwind CSS, which is already installed in your project, to make your SSR pages look beautiful without writing much CSS. As you grow, you can look into "Streaming," which allows you to show parts of a page while the slower parts (like a database search) are still loading.

For more detailed guides, visit the official Next.js documentation.

Read the Next.js Documentation