From 6e350b288c9aaf1a18f39d4ef742cda272b13309 Mon Sep 17 00:00:00 2001 From: Guillaume FORTAINE Date: Tue, 18 Oct 2022 15:53:30 +0200 Subject: [PATCH] =?UTF-8?q?refactor:=20Layouts=20RFC=20=F0=9F=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/csr.js => app/csr/page.js | 14 +- app/item/page.js | 5 + app/layout.js | 9 + pages/index.js => app/page.js | 0 pages/rsc.server.js => app/rsc/page.js | 22 +- pages/slow.server.js => app/slow/page.js | 20 +- app/ssr/page.js | 33 +++ components/comment.js | 141 ++++++------ components/story.client.js | 2 + next.config.js | 2 +- package.json | 6 +- pages/item.server.js | 13 -- pages/ssr.js | 33 --- yarn.lock | 266 +++++++++++------------ 14 files changed, 278 insertions(+), 288 deletions(-) rename pages/csr.js => app/csr/page.js (76%) create mode 100644 app/item/page.js create mode 100644 app/layout.js rename pages/index.js => app/page.js (100%) rename pages/rsc.server.js => app/rsc/page.js (61%) rename pages/slow.server.js => app/slow/page.js (64%) create mode 100644 app/ssr/page.js delete mode 100644 pages/item.server.js delete mode 100644 pages/ssr.js diff --git a/pages/csr.js b/app/csr/page.js similarity index 76% rename from pages/csr.js rename to app/csr/page.js index 0636753..d1bbc42 100644 --- a/pages/csr.js +++ b/app/csr/page.js @@ -1,14 +1,16 @@ +'use client' + import { Suspense, useEffect, useState } from 'react' // Client Components -import Page from '../components/page.client' -import Story from '../components/story.client' +import Page from '../../components/page.client' +import Story from '../../components/story.client' // Utils -import fetchData from '../lib/fetch-data' -import { transform } from '../lib/get-item' -import useData from '../lib/use-data' -import Skeletons from '../components/skeletons' +import fetchData from '../../lib/fetch-data' +import { transform } from '../../lib/get-item' +import useData from '../../lib/use-data' +import Skeletons from '../../components/skeletons' function StoryWithData({ id }) { if (typeof window === 'undefined') return diff --git a/app/item/page.js b/app/item/page.js new file mode 100644 index 0000000..5920be5 --- /dev/null +++ b/app/item/page.js @@ -0,0 +1,5 @@ +import ItemPage from '../../components/item.server' + +export default function Item({ searchParams }) { + return +} \ No newline at end of file diff --git a/app/layout.js b/app/layout.js new file mode 100644 index 0000000..afac59a --- /dev/null +++ b/app/layout.js @@ -0,0 +1,9 @@ +export default function RootLayout({ children }) { + return ( + + + {children} + + ); + } + \ No newline at end of file diff --git a/pages/index.js b/app/page.js similarity index 100% rename from pages/index.js rename to app/page.js diff --git a/pages/rsc.server.js b/app/rsc/page.js similarity index 61% rename from pages/rsc.server.js rename to app/rsc/page.js index 587c7ed..23c1b97 100644 --- a/pages/rsc.server.js +++ b/app/rsc/page.js @@ -1,21 +1,21 @@ import { Suspense } from 'react' // Shared Components -import Skeletons from '../components/skeletons' +import Skeletons from '../../components/skeletons' // Server Components -import SystemInfo from '../components/server-info.server' +import SystemInfo from '../../components/server-info.server' // Client Components -import Page from '../components/page.client' -import Story from '../components/story.client' -import Footer from '../components/footer.client' -import ErrorPlaceholder from '../components/error-placeholder.client' +import Page from '../../components/page.client' +import Story from '../../components/story.client' +import Footer from '../../components/footer.client' +import ErrorPlaceholder from '../../components/error-placeholder.client' // Utils -import fetchData from '../lib/fetch-data' -import { transform } from '../lib/get-item' -import useData from '../lib/use-data' +import fetchData from '../../lib/fetch-data' +import { transform } from '../../lib/get-item' +import useData from '../../lib/use-data' function StoryWithData({ id }) { const { data } = useData(`s-${id}`, () => fetchData(`item/${id}`).then(transform)) @@ -48,7 +48,3 @@ export default function News() { ) } - -export const config = { - runtime: 'experimental-edge', -} \ No newline at end of file diff --git a/pages/slow.server.js b/app/slow/page.js similarity index 64% rename from pages/slow.server.js rename to app/slow/page.js index 18e5ec8..3f8d775 100644 --- a/pages/slow.server.js +++ b/app/slow/page.js @@ -1,18 +1,18 @@ import { Suspense } from 'react' // Server Components -import SystemInfo from '../components/server-info.server' +import SystemInfo from '../../components/server-info.server' // Client Components -import Page from '../components/page.client' -import Story from '../components/story.client' -import Footer from '../components/footer.client' +import Page from '../../components/page.client' +import Story from '../../components/story.client' +import Footer from '../../components/footer.client' // Utils -import fetchData from '../lib/fetch-data' -import { transform } from '../lib/get-item' -import useData from '../lib/use-data' -import Skeletons from '../components/skeletons' +import fetchData from '../../lib/fetch-data' +import { transform } from '../../lib/get-item' +import useData from '../../lib/use-data' +import Skeletons from '../../components/skeletons' function StoryWithData({ id }) { const { data } = useData(`s-${id}`, () => @@ -47,7 +47,3 @@ export default function News() { ) } - -export const config = { - runtime: 'experimental-edge', -} diff --git a/app/ssr/page.js b/app/ssr/page.js new file mode 100644 index 0000000..4bb3f19 --- /dev/null +++ b/app/ssr/page.js @@ -0,0 +1,33 @@ +import { experimental_use as use } from 'react' + +import Page from '../../components/page.client' +import Story from '../../components/story.client' +import Footer from '../../components/footer.client' + +// Utils +import fetchData from '../../lib/fetch-data' +import { transform } from '../../lib/get-item' + +async function getData() { + const storyIds = await fetchData('topstories', 2000) + const data = await Promise.all( + storyIds + .slice(0, 30) + .map((id) => fetchData(`item/${id}`).then(transform)) + ) + + return data; +} + +export default function News(props) { + const data = use(getData()) + + return ( + + {data.map((item, i) => { + return + })} +