Cookie Consent by Free Privacy Policy Generator 📌 Exploring “Data Fetching with React Server Components” with Next.js


✅ Exploring “Data Fetching with React Server Components” with Next.js


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

This is a brief takeaway of what I learned in this YouTube video titled “Data Fetching with Server Components.” I also tried Next.js to see what features we already have.

  • Motivation
    • Issue
    • React Team’s Solution: Put data fetching logic on the server
  • Server Side Rendering vs React Server Components
    • Server Side Rendering (SSR)
    • React Server Components
  • Server Component Features
    • Zero Effect on the Bundle Size
    • Direct Access to the Backend Resources
    • Automatic Code Splitting
    • Server Components require users’ decision
    • Server Components provide modern UX with a server-driven mental model
  • Ref

Motivation

Issue

The React team wants to create apps with good user experience, cheap maintenance, and fast performance co-existing.

In general, having two of them in one project is comparatively more straightforward, but having all of them is pretty challenging.

Example: Good user experience and fast performance

With the code snippet, the app can render all components simultaneously and doesn’t suffer from the request waterfall, as it gets all data in one request. However, this code sacrifices the cheap maintenance because each component's API responses are coupled.

    function ArtistPage({artistId}){
    const stuff = fetchAllTheStuffJustInCase()
     return (
      <ArtistDetails artistId={artistId} details={stuff.details} />
       <TopTracks artistId={artistId} details={stuff.topTracks} />
       <Discography artistId={artistId} details={stuff.discography} />
      </ArtistDetails>
     )
    }

    // https://youtu.be/TQQPAU21ZUw&t=4m12s

🗒️ This code reminds me of the Easier to Change (ETC) principle provided in *The Pragmatic Programmer*. According to the book, “Good design is easier to change than bad design.” It also says, “Decoupled code is easier to change.”

The code below can reduce the maintenance cost but causes a so-called request waterfall, sacrificing the performance speed. In addition, the app no longer renders all components simultaneously, and now they all depend on each request order.

    // Ideal way
    function ArtistPage({artistId}){
     return (
      <ArtistDetails artistId={artistId} />
       <TopTracks artistId={artistId} />
       <Discography artistId={artistId} />
      </ArtistDetails>
     )
    }

    function ArtistDetails({artistId}) {
     const details = fetchDetails(artistId)
     // ...
    }

    function TopTracks({artistId}) {
     const topTracks = fetchTocpTracks(artistId)
     // ...
    }

    function Discography({artistId}) {
     const discography = fetchDiscograhy(artistId)
     // ...
    }

    // https://youtu.be/TQQPAU21ZUw&t=5m20s

🗒 I like this part because I can sense the strong eagerness to break through what we call impossible.

React Team’s Solution: Put data fetching logic on the server

Before

After

Server Side Rendering vs React Server Components

Server Side Rendering (SSR)

SSR is a technique that serves an initial HTML when the first page loads. Once the first HTML is loaded, it is required to download/parse/execute Client Components.

A very simplified SSR image

React Server Components

React Server Components are not interactive with the client side. Client Components always take responsibility for interacting with users and trigger re-fetch Server Components trees corresponding to the user’s actions. Notably, the client-side state is preserved when the re-fetch. We can do this with Server Components because Server Components don’t render to HTML, but they render into a special format.

Here is an example of where the client states are preserved when the re-fetch with Next.js. The search input appears only when the search input state is true, and the to-do list is filtered by the filter query controlled on the server side.

Demo

cf) Here is how Next.js explains the interaction between Server Components and Client Components. Next.js calls the special format React Server Component Payload.
React Foundations: Server and Client Components | Next.js

Server Component Features

Zero Effect on the Bundle Size

We can reduce dependencies downloaded to the client by moving some heavy dependencies components to the server.

⚠️ Not exactly HTML files (as Server Components render into a special format), but I mention only HTML here for the sake of ease.

Direct Access to the Backend Resources

Because Server Components are rendered on the server side, they can access the server-side resources directly.

    // Example 1

    import { resolve, join } from 'path';
    import { readdir, readFile } from 'react-fs';
    import marked from 'marked';

    const folder = resolve(__dirname + '/../posts');

    function Blog() {
     return readdir(folder).map(name => 
      <article key={name}>
       {/* Access the file system directly without creating any API */}
       {marked(readFile(join(folder, file), 'utf8'))} 
      </articke>
     );
    }

    // https://youtu.be/TQQPAU21ZUw&t=37m57s
    // Example 2

    import marked from 'marked';
    import { db } from './db';

    function Blog() {
     return db.posts.getAll().map(post => 
      <article key={post.id}>
       {marked(post.html)}
      </article>
     )
    }

    // https://youtu.be/TQQPAU21ZUw&t=38m05s

Automatic Code Splitting

Server components allow for the loading of only the required code. This means that server components are not downloaded to the client, and even client components that are not being used do not need to be downloaded.

    // Example

    import EditToobar from './EditToolbar.client';

    function Comment({ comment, currentUser }) {
     const canEdit = (
      currentUser.isAdmin ||
      currentUser.id === comment.author.id
     );
     return (
      <Box>
      {/* EditToonar is downloaded only when canEdit === true */}
       {canEdit && <EditToolbar />}
       <p>{comment.text}</p>
      </Box>
     )
    }

    // https://youtu.be/TQQPAU21ZUw&t=41m25s

This is questionable with Next.js, as I found client components not rendered in the initial render when I inspected the source after running npm run build.

Demo of experimental code

Server Components require users’ decision

Server Components let you decide the Client and Server Components tradeoff for every concrete use case.
Rendering: Composition Patterns | Next.js

🗒️ I think this is a double-edged sword feature as we have to understand the ins and outs of React, including both Server Components and Client Components (and Shared Components), to decide which to use in each case. In other words, it all depends on developers to make the most of the server components or to make them waste treasures.

Server Components provide modern UX with a server-driven mental model

Server Components enable developers to create modern and app-like user interfaces in an old-school way.

    // Example

    import SearchInput from './SearchInput.client';

    function SearchResults({searchText}) {
     const results = fetch('/search?q' + searchText).json();
     return (
      <>
       {/*This component triggers re-fetch of the server tree*/}
       <SearchInput /> 
       <ul>
        {results.map(result => 
         <li key={result.id}>{result.text}</li>
        )}
       </ul>
      </>
     )
    }

    // https://youtu.be/TQQPAU21ZUw&t=44m45s

Ref

Introducing Zero-Bundle-Size React Server Components - React
rfcs/text/0188-server-components.md at main · reactjs/rfcs

The whole demo code is available here.
original article

...

✅ Exploring “Data Fetching with React Server Components” with Next.js


📈 59.36 Punkte

✅ 🚀Exploring React Storybook: A Journey Through Button Components and exploring Typescript✍🏽


📈 38.09 Punkte

✅ Typescript for React Components (or How To Write Components in React The Right Way)


📈 35.78 Punkte

✅ API Data Fetching in React / Next.js


📈 35.55 Punkte

✅ This Week In React #185: React Conf, React Query, refs, Next.js after, mini-react...


📈 34.87 Punkte

✅ This Week In React #185: React Conf, React Query, refs, Next.js after, mini-react...


📈 34.87 Punkte

✅ How to use React Server Components components on Storybook 8


📈 31.61 Punkte

✅ Exploring What’s New in React 19: Actions, Async Scripts, Server Components, and More


📈 31.09 Punkte

✅ Next.js 14: Server Components and Client Components Explained


📈 30.13 Punkte

✅ Avoiding Race Conditions when Fetching Data with React Hooks


📈 29.75 Punkte

✅ React Router Data Fetching


📈 29.75 Punkte

✅ Creating an App with React, Apollo, and GraphQL: A Step-by-Step Guide to Fetching Data and Error Handling


📈 29.75 Punkte

✅ Top React Data Fetching Libraries


📈 29.75 Punkte

✅ How to Use the SWR Library for Better Data Fetching in React


📈 29.75 Punkte

✅ Fetching Data with fetch api for a React application


📈 29.75 Punkte

✅ Why is the useEffect hook used in fetching data in React?


📈 29.75 Punkte

✅ Simplifying State Management and Data Fetching in React with Redux Toolkit Query


📈 29.75 Punkte

✅ Exploring Next.js Server Components


📈 29.61 Punkte

✅ React Components 101: Building Reusable Components


📈 28.51 Punkte

✅ Converting React Class Components to Functional Components: A Checklist and Example


📈 28.51 Punkte

✅ 🔄 Class Components vs Functional Components: A Lifecycle Journey in React 🔄


📈 28.51 Punkte

✅ Embracing Modern React: Transitioning from Class Components to Functional Components


📈 28.51 Punkte

✅ Embracing Modern React: Transitioning from Class Components to Functional Components


📈 28.51 Punkte

✅ Function Components vs Class Components in React – With Examples


📈 28.51 Punkte

✅ React Controlled Components V/S Uncontrolled Components


📈 28.51 Punkte

✅ Leveraging Dynamic Styles in React Components with Styled Components


📈 28.51 Punkte

✅ React Components Explained: Function vs Class Components


📈 28.51 Punkte

✅ React Components Explained: Function vs Class Components


📈 28.51 Punkte

✅ React Components Explained: Function vs Class Components


📈 28.51 Punkte

✅ How To Handle Data Fetching in Next.js Using SWR


📈 28.28 Punkte

✅ Unleash the Power of SWR: Mastering Data Fetching in Next.js


📈 28.28 Punkte











matomo

Datei nicht gefunden!