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

nicholasio · 2024-05-24T20:25:16Z

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

npm i
npm run dev:app

Checklist:

I agree to follow this project's Code of Conduct.
I have updated the documentation accordingly.
I have added tests to cover my change.
All new and existing tests pass.

vercel · 2024-05-24T20:25:19Z

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 · 2024-05-24T20:25:20Z

🦋 Changeset detected

Latest commit: 96a5c2f

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 · 2024-06-25T22:29:39Z

📦 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 · 2024-06-26T01:19:24Z

📦 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 · 2024-06-28T01:02:09Z

📦 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 · 2024-06-28T01:13:25Z

📦 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 · 2024-06-28T01:19:54Z

📦 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 · 2024-06-28T12:45:45Z

📦 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.

tobeycodes

This is a huge pull request so it is pretty hard to review but that is probably unavoidable. Overall it looks pretty good and I didn't spot anything major. I would suggest we merge and iterate following features in future PRs

feat: app router poc

f869143

chore: adjust exports conditions

5df7f07

vercel bot deployed to Preview – headstarwp May 27, 2024 23:58 View deployment

wip: wip

e7dc174

vercel bot deployed to Preview – headstarwp June 6, 2024 18:36 View deployment

fix: merge conflicts

461a648

vercel bot deployed to Preview – headstarwp June 17, 2024 19:46 View deployment

feat: initial pass at fetch functions

fb075b2

vercel bot deployed to Preview – headstarwp June 20, 2024 23:26 View deployment

feat: more progress on data fetching on app router

41f73e3

vercel bot deployed to Preview – headstarwp June 22, 2024 01:06 View deployment

feat: fix tests and code sharing

e4055dd

vercel bot deployed to Preview – headstarwp June 23, 2024 17:14 View deployment

feat: exploring multi site support in app router

fb0e26b

vercel bot deployed to Preview – headstarwp June 23, 2024 18:23 View deployment

feat(data-fetching): wrapping up first pass at data-fetching

3b73131

vercel bot had a problem deploying to Preview – headstarwp June 24, 2024 20:02 Failure

nicholasio added 2 commits June 24, 2024 19:50

fix: removing hooks package

26c35a7

chore: update workspaces config

0a0284b

vercel bot had a problem deploying to Preview – headstarwp June 24, 2024 22:51 Failure

fix: build error

ce3ec6d

vercel bot had a problem deploying to Preview – headstarwp June 24, 2024 22:58 Failure

feat(data-fetching): fetchAppSettings & queryAppSettings

8f078f6

vercel bot had a problem deploying to Preview – headstarwp June 24, 2024 23:54 Failure

fix: build issue

5a183aa

vercel bot had a problem deploying to Preview – headstarwp June 25, 2024 00:19 Failure

feat(data-fetching): queryAuthorArchive

e5f741e

vercel bot had a problem deploying to Preview – headstarwp June 25, 2024 02:08 Failure

feat(data-fetching): issue a not-found if no redirect is found

c3cf144

vercel bot deployed to Preview – headstarwp June 25, 2024 17:26 View deployment

nicholasio changed the title ~~feat: app router poc~~ [AppRouter] Initial Setup & Data-Fetching in Server Components Jun 25, 2024

test: add more data-fetching tests

d96e10c

vercel bot deployed to Preview – headstarwp June 25, 2024 22:24 View deployment

test: more tests

3006585

vercel bot deployed to Preview – headstarwp June 26, 2024 01:17 View deployment

test: add more tests

46971cb

vercel bot deployed to Preview – headstarwp June 28, 2024 01:00 View deployment

chore: changeset

dad963d

vercel bot deployed to Preview – headstarwp June 28, 2024 01:08 View deployment

chore: fix lock file

80c3576

vercel bot deployed to Preview – headstarwp June 28, 2024 01:11 View deployment

fix: re-export other server-compatible components

a7eebf7

vercel bot deployed to Preview – headstarwp June 28, 2024 01:18 View deployment

fix: remove unnecessary cache headers

96a5c2f

vercel bot deployed to Preview – headstarwp June 28, 2024 12:44 View deployment

nicholasio requested review from tobeycodes, Antonio-Laguna and chriseagle June 28, 2024 12:59

nicholasio mentioned this pull request Jun 30, 2024

App Router Support #383

Open

tobeycodes approved these changes Jul 2, 2024

View reviewed changes

nicholasio merged commit 96ea386 into develop Jul 11, 2024
13 checks passed

nicholasio deleted the feature/app-router branch July 11, 2024 18:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nicholasio commented May 24, 2024 •

edited

Loading

vercel bot commented May 24, 2024 •

edited

Loading

changeset-bot bot commented May 24, 2024 •

edited

Loading

github-actions bot commented Jun 25, 2024

github-actions bot commented Jun 26, 2024

github-actions bot commented Jun 28, 2024

github-actions bot commented Jun 28, 2024

github-actions bot commented Jun 28, 2024

github-actions bot commented Jun 28, 2024

tobeycodes left a comment

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

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

Conversation

nicholasio commented May 24, 2024 • edited Loading

Description

Aditional things covered in this PR

How to review this PR

How to test the Change

Checklist:

vercel bot commented May 24, 2024 • edited Loading

changeset-bot bot commented May 24, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Jun 25, 2024

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

⚠️ Global Bundle Size Increased

Nine Pages Changed Size

github-actions bot commented Jun 26, 2024

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

⚠️ Global Bundle Size Increased

Nine Pages Changed Size

github-actions bot commented Jun 28, 2024

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

⚠️ Global Bundle Size Increased

Nine Pages Changed Size

github-actions bot commented Jun 28, 2024

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

⚠️ Global Bundle Size Increased

Nine Pages Changed Size

github-actions bot commented Jun 28, 2024

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

⚠️ Global Bundle Size Increased

Nine Pages Changed Size

github-actions bot commented Jun 28, 2024

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

⚠️ Global Bundle Size Increased

Nine Pages Changed Size

tobeycodes left a comment

Choose a reason for hiding this comment

nicholasio commented May 24, 2024 •

edited

Loading

vercel bot commented May 24, 2024 •

edited

Loading

changeset-bot bot commented May 24, 2024 •

edited

Loading