search

10up / headstartwp

Build a headless website fast with WordPress, the world’s most popular CMS, and Next.js, the most popular React framework. A free and open source solution by the experts at 10up.
https://headstartwp.10up.com
160 stars 16 forks source link

[AppRouter] Initial Setup & Data-Fetching in Server Components #781

Closed nicholasio closed 2 months ago

nicholasio commented 4 months ago

Description

This PR introduces the initial support for App-Router and data-fetching in server components.

It introduces fetch functions (e.g fetchPost, fetchPosts etc) in the core package which are the non-hook-based versions of the useFetch* hooks. It reuses the same fetch strategies which allows us to share the same logic for both pages routes, app router and client side data fetching.

On the next package, this PR introduces the query functions (e.g queryPosts, queryPost etc). These functions are exposed in @headstartwp/next/app.

The query functions expects to received the page router params which are used to extract URL params as well as get the current site (if using multisite).

e.g:

import { HtmlDecoder } from '@headstartwp/core/react';
import { HeadstartWPRoute, queryPost } from '@headstartwp/next/app';

// (single)/[...path].tsx
const Single = async ({ params }: HeadstartWPRoute) => {
       // passing params to routeParams will automatically fetch the post for the given url/path
    const { data } = await queryPost({
        routeParams: params,
    });

    return (
        <article>
            <h1>
                <HtmlDecoder html={data.post.title.rendered ?? ''} />
            </h1>
        </article>
    );
};

If using multisite the file name for the single page would be: _sites/[site]/(single)/[...path].tsx

Closes #788

Aditional things covered in this PR

This initial PR which started as a PoC also makes BlocksRenderer compatible with server-components.

In the core package we are now exposing only server-compatible components via the react-server condition export.

  "./react": {
      "react-server": {
        "import": "./dist/mjs/rsc/index.js",
        "types": "./dist/mjs/rsc/index.d.ts"
      },
      "require": "./dist/cjs/react/index.js",
      "import": "./dist/mjs/react/index.js",
      "types": "./dist/mjs/react/index.d.ts"
    },

Then ./dist/mjs/rsc/index.js only exports server-compatible react components. This mean things that isn't supposed to be used in server components will not be exported as well as components that haven't been tested/ported yet.

This conditional exports allows end users to use the same @headstartwp/core/react export but get different things on client components versus server components. Ideally all components would avaliable in server components except those that aren't supposed to be used in server components.

The other alternative is simply exposing a new export under @headstartwp/core/rsc or @headstartwp/core/react/server. I'm open to suggestions.

UPDATE: I actually think it makes sense to keep the same export for server component and just mark everything that is client components as such. The only thing that is changing as far as the underlying implementaiton is the BlocksRenderer.

How to review this PR

This is a big PR because it also delets the hooks packages which hasn't been used nor maitained. But generally given the size of this PR I'd start reviweing the new project wp-nextjs-app to understand how the structure of the project looks like, then looking at the changes at next and core packages respectively.

How to test the Change

  1. npm i
  2. npm run dev:app

Checklist:

vercel[bot] commented 4 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headstarwp ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 28, 2024 0:44am
changeset-bot[bot] commented 4 months ago

🦋 Changeset detected

Latest commit: 96a5c2f7a02b41a00b1112aedcca6610d28877ed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages | Name | Type | | ----------------- | ----- | | @headstartwp/core | Minor | | @headstartwp/next | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions[bot] commented 3 months ago

📦 Next.js Bundle Analysis for @10up/headstartwp

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 123.7 KB (🟡 +550 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Nine Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load % of Budget (145 KB)
/ 10.23 KB 133.93 KB 92.36% (🟡 +0.07%)
/404 405 B 124.1 KB 85.58% (+/- <0.01%)
/500 408 B 124.1 KB 85.59% (+/- <0.01%)
/[...path] 7.16 KB 130.86 KB 90.25% (+/- <0.01%)
/author/[...path] 5.77 KB 129.48 KB 89.29% (🟡 +0.07%)
/blog/[[...path]] 10.62 KB 134.32 KB 92.64% (🟡 +0.07%)
/category/[...path] 5.54 KB 129.25 KB 89.13% (🟡 +0.08%)
/search/[[...path]] 3.56 KB 127.26 KB 87.77% (🟡 +0.01%)
/tag/[...path] 5.54 KB 129.25 KB 89.14% (🟡 +0.07%)
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

github-actions[bot] commented 3 months ago

📦 Next.js Bundle Analysis for @10up/headstartwp

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 123.7 KB (🟡 +550 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Nine Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load % of Budget (145 KB)
/ 10.23 KB 133.93 KB 92.36% (🟡 +0.07%)
/404 405 B 124.1 KB 85.58% (+/- <0.01%)
/500 408 B 124.1 KB 85.59% (+/- <0.01%)
/[...path] 7.16 KB 130.86 KB 90.25% (+/- <0.01%)
/author/[...path] 5.77 KB 129.48 KB 89.29% (🟡 +0.07%)
/blog/[[...path]] 10.62 KB 134.32 KB 92.64% (🟡 +0.07%)
/category/[...path] 5.54 KB 129.25 KB 89.13% (🟡 +0.08%)
/search/[[...path]] 3.56 KB 127.26 KB 87.77% (🟡 +0.01%)
/tag/[...path] 5.54 KB 129.25 KB 89.14% (🟡 +0.07%)
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

github-actions[bot] commented 3 months ago

📦 Next.js Bundle Analysis for @10up/headstartwp

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 123.7 KB (🟡 +550 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Nine Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load % of Budget (145 KB)
/ 10.23 KB 133.93 KB 92.36% (🟡 +0.07%)
/404 405 B 124.1 KB 85.58% (+/- <0.01%)
/500 408 B 124.1 KB 85.59% (+/- <0.01%)
/[...path] 7.16 KB 130.86 KB 90.25% (+/- <0.01%)
/author/[...path] 5.77 KB 129.48 KB 89.29% (🟡 +0.07%)
/blog/[[...path]] 10.62 KB 134.32 KB 92.64% (🟡 +0.07%)
/category/[...path] 5.54 KB 129.25 KB 89.13% (🟡 +0.08%)
/search/[[...path]] 3.56 KB 127.26 KB 87.77% (🟡 +0.01%)
/tag/[...path] 5.54 KB 129.25 KB 89.14% (🟡 +0.07%)
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

github-actions[bot] commented 3 months ago

📦 Next.js Bundle Analysis for @10up/headstartwp

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 123.7 KB (🟡 +550 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Nine Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load % of Budget (145 KB)
/ 10.23 KB 133.93 KB 92.36% (🟡 +0.07%)
/404 405 B 124.1 KB 85.58% (+/- <0.01%)
/500 408 B 124.1 KB 85.59% (+/- <0.01%)
/[...path] 7.16 KB 130.86 KB 90.25% (+/- <0.01%)
/author/[...path] 5.77 KB 129.48 KB 89.29% (🟡 +0.07%)
/blog/[[...path]] 10.62 KB 134.32 KB 92.64% (🟡 +0.07%)
/category/[...path] 5.54 KB 129.25 KB 89.13% (🟡 +0.08%)
/search/[[...path]] 3.56 KB 127.26 KB 87.77% (🟡 +0.01%)
/tag/[...path] 5.54 KB 129.25 KB 89.14% (🟡 +0.07%)
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

github-actions[bot] commented 3 months ago

📦 Next.js Bundle Analysis for @10up/headstartwp

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 123.7 KB (🟡 +550 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Nine Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load % of Budget (145 KB)
/ 10.23 KB 133.93 KB 92.36% (🟡 +0.07%)
/404 405 B 124.1 KB 85.58% (+/- <0.01%)
/500 408 B 124.1 KB 85.59% (+/- <0.01%)
/[...path] 7.16 KB 130.86 KB 90.25% (+/- <0.01%)
/author/[...path] 5.77 KB 129.48 KB 89.29% (🟡 +0.07%)
/blog/[[...path]] 10.62 KB 134.32 KB 92.64% (🟡 +0.07%)
/category/[...path] 5.54 KB 129.25 KB 89.13% (🟡 +0.08%)
/search/[[...path]] 3.56 KB 127.26 KB 87.77% (🟡 +0.01%)
/tag/[...path] 5.54 KB 129.25 KB 89.14% (🟡 +0.07%)
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

github-actions[bot] commented 3 months ago

📦 Next.js Bundle Analysis for @10up/headstartwp

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 123.7 KB (🟡 +550 B)
Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Nine Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load % of Budget (145 KB)
/ 10.23 KB 133.93 KB 92.36% (🟡 +0.07%)
/404 405 B 124.1 KB 85.58% (+/- <0.01%)
/500 408 B 124.1 KB 85.59% (+/- <0.01%)
/[...path] 7.16 KB 130.86 KB 90.25% (+/- <0.01%)
/author/[...path] 5.77 KB 129.48 KB 89.29% (🟡 +0.07%)
/blog/[[...path]] 10.62 KB 134.32 KB 92.64% (🟡 +0.07%)
/category/[...path] 5.54 KB 129.25 KB 89.13% (🟡 +0.08%)
/search/[[...path]] 3.56 KB 127.26 KB 87.77% (🟡 +0.01%)
/tag/[...path] 5.54 KB 129.25 KB 89.14% (🟡 +0.07%)
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.