Advanced Topics in React (Optional)

Server-Side Rendering (SSR) with Next.js

Server-Side Rendering (SSR) is a technique where React components are rendered on the server and sent as fully formed HTML to the client. This improves SEO, initial load performance, and can enhance user experience.

Next.js is the most popular React framework supporting SSR out of the box.

  • Next.js uses file-based routing and provides APIs like getServerSideProps for SSR data fetching.
  • SSR helps with dynamic content that needs to be up-to-date on every request.
  • It allows better SEO since search engines can crawl pre-rendered HTML.

Basic Example of SSR in Next.js


export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Posts({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}
  

Static Site Generation (SSG)

Static Site Generation pre-builds pages at build time rather than on each request. It is ideal for content that doesn't change often and can be served as static files.

  • Next.js provides getStaticProps for SSG.
  • SSG offers excellent performance and is easily cacheable by CDNs.
  • Good fit for blogs, documentation, marketing pages, and portfolios.

Example of SSG with Next.js


export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 10, // optional Incremental Static Regeneration every 10 seconds
  };
}

export default function Posts({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}
  

React and TypeScript

TypeScript adds static typing to JavaScript, improving developer productivity and code maintainability. React with TypeScript allows you to catch errors early and document your component APIs clearly.

Getting Started with React + TypeScript

npx create-react-app my-app --template typescript

Basic React Component with TypeScript


import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;
  

Benefits of Using TypeScript in React

  • Improved code quality and fewer runtime errors
  • Better autocomplete and IDE support
  • Clearer component interfaces and props validation
  • Easier refactoring and collaboration on large codebases

Conclusion

Advanced React topics like SSR, SSG, and TypeScript open new possibilities for performance, SEO, and developer experience. These tools and techniques help you build robust, scalable, and maintainable React applications. We hope this series has equipped you with a solid foundation and inspiration to dive deeper into React development.

Post a Comment

0 Comments