Labs
9 Server Rendering

Server Rendering

Objectives

  1. Server-side rendering (SSR).
  2. Creating and nesting components.
  3. Conditional and list rendering.
  4. Dynamic and static rendering.

1 Country Facts

Tailwind CSS will be used for presentation. It can be automatically included and configured when creating your applications.

Figure 1 (opens in a new tab): Country facts using server (static) rendering

  1. Reimplement the 7.2 Country Facts application, using React and Next.js.

    bunx create-next-app@latest 01-country-facts --app --javascript --react-compiler --tailwind --biome --no-src-dir --import-alias "@/*"

  2. Use a dynamic route with optional catch-all slug (opens in a new tab), [[...slug]], to handle routing and navigation.

  3. Build your application using bun run build then start it using bun run start. Take note of the observed differences.

  4. Implement the generateStaticParams() function to generate paths for the root page, all regions, all subregions, and all countries.

  5. Apply different rendering methods, such as dynamic and static, to render the facts for every country.

  6. Export your application by first updating next.config.mjs, then running bun run build:

    next.config.mjs
    const nextConfig = {
  output: "export",
};

  7. Install live-server (opens in a new tab) or serve (opens in a new tab) and serve the static out directory.

2 Task Tracker

Reimplement the 8.1 Task Tracker application, using React and Next.js.

3 Bank Accounts

Reimplement the 8.2 Bank Accounts application, using React and Next.js.

Structure

    • Resources

    8 RESTfulness10 Object Mapping