├── .gitignore
├── README.md
├── api
    └── index.js
├── app
    ├── components
    │   ├── footer.js
    │   ├── header.js
    │   ├── item.js
    │   ├── item.sc.js
    │   ├── logo.js
    │   ├── meta.js
    │   ├── nav.js
    │   ├── page.js
    │   ├── server-info.server.js
    │   ├── spinner.js
    │   ├── stories.js
    │   └── story.js
    ├── entry.client.jsx
    ├── entry.server.jsx
    ├── lib
    │   ├── fetch-data.js
    │   ├── get-item.js
    │   ├── get-story-ids.js
    │   ├── time-ago.js
    │   └── use-data.js
    ├── pages
    │   ├── _app.js
    │   ├── _document.js
    │   ├── csr.js
    │   ├── index.js
    │   ├── rsc.server.js
    │   ├── slow.server.js
    │   └── ssr.js
    └── root.jsx
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    └── favicon.ico
├── remix.config.js
└── vercel.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | .cache
4 | .vercel
5 | .output
6 | 
7 | public/build
8 | api/build
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to Remix!
 2 | 
 3 | - [Remix Docs](https://remix.run/docs)
 4 | 
 5 | ## Deployment
 6 | 
 7 | After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
 8 | 
 9 | If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
10 | 
11 | ```sh
12 | npm i -g vercel
13 | vercel
14 | ```
15 | 
16 | It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
17 | 
18 | ## Development
19 | 
20 | To run your Remix app locally, make sure your project's local dependencies are installed:
21 | 
22 | ```sh
23 | npm install
24 | ```
25 | 
26 | Afterwards, start the Remix development server like so:
27 | 
28 | ```sh
29 | npm run dev
30 | ```
31 | 
32 | Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
33 | 
34 | If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.
35 | 


--------------------------------------------------------------------------------
/api/index.js:
--------------------------------------------------------------------------------
1 | const { createRequestHandler } = require("@remix-run/vercel");
2 | 
3 | module.exports = createRequestHandler({
4 |   build: require("./build")
5 | });
6 | 


--------------------------------------------------------------------------------
/app/components/footer.js:
--------------------------------------------------------------------------------
 1 | export default function Footer() {
 2 |   return (
 3 |     <div>
 4 |       <footer className="footer">
 5 |         Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC |
 6 |         Contact
 7 |       </footer>
 8 | 
 9 |       <style
10 |         dangerouslySetInnerHTML={{
11 |           __html: `
12 |       .footer {
13 |         padding: 10px 0 40px;
14 |         color: #ccc;
15 |         font-size: 14px;
16 |         text-align: center;
17 |         border-top: 1px solid;
18 |         margin-top: 50px;
19 |       }
20 |     `,
21 |         }}
22 |       />
23 |     </div>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/app/components/header.js:
--------------------------------------------------------------------------------
 1 | import Nav from "./nav";
 2 | import Logo from "./logo";
 3 | 
 4 | export default function Header() {
 5 |   return (
 6 |     <>
 7 |       <style
 8 |         dangerouslySetInnerHTML={{
 9 |           __html: `
10 |   header {
11 |     background: #ffa52a;
12 |     display: flex;
13 |     font-size: 14px;
14 |   }
15 |   .logo {
16 |     margin: 4px 5px 2px 4px;
17 |     display: inline-block;
18 |   }
19 |   .left {
20 |     flex: 9;
21 |   }
22 |   .right {
23 |     flex: 1;
24 |     text-align: right;
25 |   }
26 |   .site-title {
27 |     font-weight: bold;
28 |     display: inline-block;
29 |     font-size: 14px;
30 |     text-decoration: none;
31 |     padding: 8px 10px 8px 4px;
32 |     color: #000;
33 |     vertical-align: top;
34 |   }
35 |   a.login {
36 |     padding: 10px;
37 |     display: inline-block;
38 |     font-size: 11px;
39 |     text-transform: uppercase;
40 |     text-decoration: none;
41 |     color: #000;
42 |   }
43 |   .login:hover {
44 |     color: #fff;
45 |   }
46 |   .nav {
47 |     display: inline-block;
48 |     vertical-align: top;
49 |   }
50 |   @media (max-width: 750px) {
51 |     .site-title {
52 |       font-size: 16px;
53 |       padding-bottom: 0;
54 |     }
55 |     a.login {
56 |       padding: 24px 10px 23px;
57 |     }
58 |     .nav {
59 |       display: block;
60 |     }
61 |   }
62 | `,
63 |         }}
64 |       />
65 |       <header>
66 |         <div className="left">
67 |           <a href="/">
68 |             <span className="logo">
69 |               <Logo />
70 |             </span>
71 |             <span className="site-title">Hacker Next</span>
72 |           </a>
73 |           <div className="nav">
74 |             <Nav />
75 |           </div>
76 |         </div>
77 |         <div className="right">
78 |           <a href="/login" className="login">
79 |             login
80 |           </a>
81 |         </div>
82 |       </header>
83 |     </>
84 |   );
85 | }
86 | 


--------------------------------------------------------------------------------
/app/components/item.js:
--------------------------------------------------------------------------------
 1 | import Story from "./story";
 2 | import Comment from "./comment";
 3 | import CommentForm from "./comment-form";
 4 | 
 5 | export default function Item({ story, comments = null }) {
 6 |   return (
 7 |     <div className="item">
 8 |       <Story {...story} />
 9 | 
10 |       <div className="form">
11 |         <CommentForm />
12 |       </div>
13 | 
14 |       <div className="comments">
15 |         {comments ? (
16 |           comments.map((comment) => <Comment key={comment.id} {...comment} />)
17 |         ) : (
18 |           <div className="loading">Loading…</div>
19 |         )}
20 |       </div>
21 | 
22 |       <style jsx>{`
23 |         .item {
24 |           padding: 10px 29px;
25 |         }
26 |         .form {
27 |           padding: 15px 0;
28 |         }
29 |         .loading {
30 |           font-size: 13px;
31 |         }
32 |         .comments {
33 |           padding: 10px 0 20px;
34 |         }
35 |         @media (max-width: 750px) {
36 |           .item {
37 |             padding: 8px 0px;
38 |           }
39 |         }
40 |       `}</style>
41 |     </div>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/app/components/item.sc.js:
--------------------------------------------------------------------------------
 1 | import React, { Suspense } from "react";
 2 | import { useRouter } from "next/router";
 3 | 
 4 | import Page from "./page";
 5 | import Item from "./item";
 6 | 
 7 | import getItem from "../lib/get-item";
 8 | import getComments from "../app/lib/get-comments";
 9 | 
10 | let commentsData = {};
11 | let storyData = {};
12 | let fetchDataPromise = {};
13 | 
14 | function ItemPageWithData({ id }) {
15 |   if (!commentsData[id]) {
16 |     if (!fetchDataPromise[id]) {
17 |       fetchDataPromise[id] = getItem(id)
18 |         .then((story) => {
19 |           storyData[id] = story;
20 |           return getComments(story.comments);
21 |         })
22 |         .then((c) => (commentsData[id] = c));
23 |     }
24 |     throw fetchDataPromise[id];
25 |   }
26 | 
27 |   return (
28 |     <Page>
29 |       <Item story={storyData[id]} comments={commentsData[id]} />
30 |     </Page>
31 |   );
32 | }
33 | 
34 | export default function ItemPage() {
35 |   const { id } = useRouter().query;
36 | 
37 |   if (!id) return null;
38 | 
39 |   return (
40 |     <Suspense>
41 |       <ItemPageWithData id={id} />
42 |     </Suspense>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/app/components/logo.js:
--------------------------------------------------------------------------------
 1 | export default function Logo() {
 2 |   return (
 3 |     <>
 4 |       <span className="logo-n">N</span>
 5 |       <style
 6 |         dangerouslySetInnerHTML={{
 7 |           __html: `
 8 |       .logo-n {
 9 |         border: 1px solid #fff;
10 |         display: inline-block;
11 |         color: #fff;
12 |         font-weight: bold;
13 |         font-size: 11px;
14 |         padding: 5px 8px;
15 |       }
16 |     `,
17 |         }}
18 |       />
19 |     </>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/app/components/meta.js:
--------------------------------------------------------------------------------
 1 | export default function Meta() {
 2 |   return (
 3 |     <>
 4 |       <meta name="viewport" content="width=device-width, initial-scale=1" />
 5 |       <meta charSet="utf-8" />
 6 |       <style
 7 |         dangerouslySetInnerHTML={{
 8 |           __html: `
 9 |       body {
10 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
11 |           'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
12 |           'Helvetica Neue', sans-serif;
13 |         background: #eee;
14 |       }
15 |       * {
16 |         margin: 0;
17 |         padding: 0;
18 |         box-sizing: border-box;
19 |       }
20 |       .spinner {
21 |         margin: 12px;
22 |         width: 28px;
23 |         height: 28px;
24 |         animation: spinner-rotating 1.2s infinite;
25 |         animation-timing-function: steps(12, end);
26 |       }
27 |       .spinner:before {
28 |         content: '';
29 |         display: block;
30 |         width: 4px;
31 |         height: 4px;
32 |         margin: 0;
33 |         margin-left: 12px;
34 |         border-radius: 50%;
35 |         background: #888;
36 |         color: #ccc;
37 |         box-shadow:
38 |           6px 1.61px,
39 |           10.39px 6px,
40 |           12px 12px,
41 |           10.39px 18px,
42 |           6px 22.39px,
43 |           0 24px,
44 |           -6px 1.61px #999,
45 |           -10.39px 6px #aaa,
46 |           -12px 12px #bbb,
47 |           -10.39px 18px,
48 |           -6px 22.39px;
49 |       }
50 |       @keyframes spinner-rotating {
51 |         from { transform: rotate(0deg) }
52 |         to { transform: rotate(360deg) }
53 |       }
54 |       .title {
55 |         font-size: 15px;
56 |         margin-bottom: 3px;
57 |       }
58 |       .title > a {
59 |         color: #000;
60 |         text-decoration: none;
61 |       }
62 |       .title > a:visited {
63 |         color: #828282;
64 |       }
65 |       .meta {
66 |         font-size: 12px;
67 |       }
68 |       .source {
69 |         font-size: 12px;
70 |         display: inline-block;
71 |         margin-left: 5px;
72 |       }
73 |       .source a,
74 |       .meta a {
75 |         color: #828282;
76 |         text-decoration: none;
77 |       }
78 |       .source a:hover,
79 |       .meta a:hover {
80 |         text-decoration: underline;
81 |       }
82 |     `,
83 |         }}
84 |       />
85 |     </>
86 |   );
87 | }
88 | 


--------------------------------------------------------------------------------
/app/components/nav.js:
--------------------------------------------------------------------------------
 1 | export default function Nav() {
 2 |   return (
 3 |     <ul className="nav-ul">
 4 |       <Item href="/newest">new</Item>
 5 |       <Item href="/show">show</Item>
 6 |       <Item href="/ask">ask</Item>
 7 |       <Item href="/jobs">jobs</Item>
 8 |       <Item href="/submit">submit</Item>
 9 | 
10 |       <style
11 |         dangerouslySetInnerHTML={{
12 |           __html: `
13 |       .nav-ul {
14 |         list-style-type: none;
15 |       }
16 |       .nav-ul li {
17 |         display: inline-block;
18 |       }
19 |       .nav-ul li a {
20 |         display: inline-block;
21 |         padding: 10px;
22 |         font-size: 11px;
23 |         text-transform: uppercase;
24 |         text-decoration: none;
25 |         color: #000;
26 |       }
27 |       .nav-ul li a:hover {
28 |         color: #fff;
29 |       }
30 |     `,
31 |         }}
32 |       />
33 |     </ul>
34 |   );
35 | }
36 | 
37 | const Item = ({ href, children }) => (
38 |   <li>
39 |     <a href={href}>{children}</a>
40 |   </li>
41 | );
42 | 


--------------------------------------------------------------------------------
/app/components/page.js:
--------------------------------------------------------------------------------
 1 | import Header from "./header";
 2 | import Meta from "./meta";
 3 | 
 4 | export default function Page({ children }) {
 5 |   return (
 6 |     <>
 7 |       <style
 8 |         dangerouslySetInnerHTML={{
 9 |           __html: `
10 |     .main {
11 |       width: 85%;
12 |       margin: auto;
13 |       padding: 10px 0 0 0;
14 |     }
15 |     .page {
16 |       color: #828282;
17 |       background: #fff;
18 |       padding: 3px 10px;
19 |     }
20 |     @media (max-width: 750px) {
21 |       .main {
22 |         padding: 0;
23 |         width: auto;
24 |       }
25 |     }
26 |   `,
27 |         }}
28 |       />
29 |       <div className="main">
30 |         <Header />
31 |         <div className="page">{children}</div>
32 |       </div>
33 |     </>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/app/components/server-info.server.js:
--------------------------------------------------------------------------------
1 | export default function ServerInfo() {
2 |   return (
3 |     <div style={{ textAlign: 'center', fontSize: 14, paddingBottom: 20 }}>
4 |       Rendered at {new Date().toTimeString()} with Edge Middleware.
5 |     </div>
6 |   )
7 | }
8 | 


--------------------------------------------------------------------------------
/app/components/spinner.js:
--------------------------------------------------------------------------------
1 | export default function Spinner() {
2 |   return <div className="spinner" />;
3 | }
4 | 


--------------------------------------------------------------------------------
/app/components/stories.js:
--------------------------------------------------------------------------------
 1 | import Story from "./story";
 2 | import { Link } from "remix";
 3 | 
 4 | export default ({ stories, page = 1, offset = null }) => (
 5 |   <div>
 6 |     {stories.map((story, i) => (
 7 |       <div key={story.id} className="item">
 8 |         {null != offset ? (
 9 |           <span className="count">{i + offset + 1}</span>
10 |         ) : null}
11 |         <div className="story">
12 |           <Story {...story} />
13 |         </div>
14 |       </div>
15 |     ))}
16 |     <footer className="footer">
17 |       <Link href={`/news?p=${page + 1}`}>
18 |         More
19 |       </Link>
20 |     </footer>
21 | 
22 |     <style jsx>{`
23 |       .item {
24 |         display: flex;
25 |         margin: 10px 0;
26 |       }
27 |       .count {
28 |         flex-basis: auto;
29 |         flex-grow: 1;
30 |         vertical-align: top;
31 |         font-size: 14px;
32 |         padding-right: 5px;
33 |         display: block;
34 |         width: 20px;
35 |         text-align: right;
36 |       }
37 |       .count::after {
38 |         content: ".";
39 |       }
40 |       .story {
41 |         flex: 100;
42 |         display: inline-block;
43 |       }
44 |       .footer {
45 |         padding: 10px 0 40px 30px;
46 |       }
47 |       .footer a {
48 |         color: #000;
49 |         font-size: 14px;
50 |         display: inline-block;
51 |         text-decoration: none;
52 |       }
53 |     `}</style>
54 |   </div>
55 | );
56 | 


--------------------------------------------------------------------------------
/app/components/story.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | import timeAgo from "../lib/time-ago";
 4 | 
 5 | export default function Story({
 6 |   id,
 7 |   title,
 8 |   date,
 9 |   url,
10 |   user,
11 |   score,
12 |   commentsCount,
13 | }) {
14 |   const { host } = url ? new URL(url) : { host: "#" };
15 |   const [voted, setVoted] = useState(false);
16 | 
17 |   return (
18 |     <div style={{ margin: "5px 0" }}>
19 |       <div className="title">
20 |         <span
21 |           style={{
22 |             cursor: "pointer",
23 |             fontFamily: "sans-serif",
24 |             marginRight: 5,
25 |             color: voted ? "#ffa52a" : "#ccc",
26 |           }}
27 |           onClick={() => setVoted(!voted)}
28 |         >
29 |           &#9650;
30 |         </span>
31 |         <a href={url}>{title}</a>
32 |         {url && (
33 |           <span className="source">
34 |             <a href={`http://${host}`}>{host.replace(/^www\./, "")}</a>
35 |           </span>
36 |         )}
37 |       </div>
38 |       <div className="meta">
39 |         {score} {plural(score, "point")} by{" "}
40 |         <a href={`/user?id=${user}`}>{user}</a>{" "}
41 |         <a href={`/item?id=${id}`}>
42 |           {timeAgo(new Date(date)) /* note: we re-hydrate due to ssr */} ago
43 |         </a>{" "}
44 |         |{" "}
45 |         <a href={`/item?id=${id}`}>
46 |           {commentsCount} {plural(commentsCount, "comment")}
47 |         </a>
48 |       </div>
49 |     </div>
50 |   );
51 | }
52 | 
53 | const plural = (n, s) => s + (n === 0 || n > 1 ? "s" : "");
54 | 


--------------------------------------------------------------------------------
/app/entry.client.jsx:
--------------------------------------------------------------------------------
1 | import { hydrate } from "react-dom";
2 | import { RemixBrowser } from "remix";
3 | 
4 | hydrate(<RemixBrowser />, document);
5 | 


--------------------------------------------------------------------------------
/app/entry.server.jsx:
--------------------------------------------------------------------------------
 1 | import { renderToString } from "react-dom/server";
 2 | import { RemixServer } from "remix";
 3 | 
 4 | export default function handleRequest(
 5 |   request,
 6 |   responseStatusCode,
 7 |   responseHeaders,
 8 |   remixContext
 9 | ) {
10 |   let markup = renderToString(
11 |     <RemixServer context={remixContext} url={request.url} />
12 |   );
13 | 
14 |   responseHeaders.set("Content-Type", "text/html");
15 |   responseHeaders.set("Cache-Control", "s-maxage=5, stale-while-revalidate=5");
16 | 
17 |   return new Response("<!DOCTYPE html>" + markup, {
18 |     status: responseStatusCode,
19 |     headers: responseHeaders,
20 |   });
21 | }
22 | 


--------------------------------------------------------------------------------
/app/lib/fetch-data.js:
--------------------------------------------------------------------------------
 1 | export default async function fetchData(type, delay = 0) {
 2 |   const [res] = await Promise.all([
 3 |     fetch(`https://hacker-news.firebaseio.com/v0/${type}.json`),
 4 |     new Promise((res) => setTimeout(res, Math.random() * delay)),
 5 |   ]);
 6 |   if (res.status !== 200) {
 7 |     throw new Error(`Status ${res.status}`);
 8 |   }
 9 |   return res.json();
10 | }
11 | 


--------------------------------------------------------------------------------
/app/lib/get-item.js:
--------------------------------------------------------------------------------
 1 | import fetchData from './fetch-data'
 2 | 
 3 | export default async function (id) {
 4 |   const val = await fetchData(`item/${id}`)
 5 |   if (val) {
 6 |     return transform(val)
 7 |   } else {
 8 |     return null
 9 |   }
10 | }
11 | 
12 | export function transform(val) {
13 |   return {
14 |     id: val.id,
15 |     url: val.url || '',
16 |     user: val.by,
17 |     // time is seconds since epoch, not ms
18 |     date: new Date(val.time * 1000).getTime() || 0,
19 |     // sometimes `kids` is `undefined`
20 |     comments: val.kids || [],
21 |     commentsCount: val.descendants || 0,
22 |     score: val.score,
23 |     title: val.title,
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/app/lib/get-story-ids.js:
--------------------------------------------------------------------------------
 1 | import fetchData from './fetch-data'
 2 | 
 3 | export default async function (
 4 |   type = 'topstories',
 5 |   { page = 1, max = 30 } = {}
 6 | ) {
 7 |   const start = max * (page - 1)
 8 |   const end = start + max
 9 |   const ids = await fetchData(type)
10 |   return ids.slice(start, end)
11 | }
12 | 


--------------------------------------------------------------------------------
/app/lib/time-ago.js:
--------------------------------------------------------------------------------
 1 | import ms from 'ms'
 2 | 
 3 | const map = {
 4 |   s: 'seconds',
 5 |   ms: 'milliseconds',
 6 |   m: 'minutes',
 7 |   h: 'hours',
 8 |   d: 'days',
 9 | }
10 | 
11 | export default (date) =>
12 |   date ? ms(new Date() - date).replace(/[a-z]+/, (str) => ' ' + map[str]) : ''
13 | 


--------------------------------------------------------------------------------
/app/lib/use-data.js:
--------------------------------------------------------------------------------
 1 | const cache = {}
 2 | 
 3 | export default function useData(key, fetcher) {
 4 |   if (!cache[key]) {
 5 |     let data
 6 |     let promise
 7 |     cache[key] = () => {
 8 |       if (data !== undefined) return data
 9 |       if (!promise) promise = fetcher().then((r) => (data = r))
10 |       throw promise
11 |     }
12 |   }
13 |   return cache[key]()
14 | }
15 | 


--------------------------------------------------------------------------------
/app/pages/_app.js:
--------------------------------------------------------------------------------
1 | function MyApp({ Component, pageProps }) {
2 |   return <Component {...pageProps} />
3 | }
4 | 
5 | export default MyApp
6 | 


--------------------------------------------------------------------------------
/app/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html>
 6 |       <Head />
 7 |       <body>
 8 |         <Main />
 9 |         <NextScript />
10 |       </body>
11 |     </Html>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/app/pages/csr.js:
--------------------------------------------------------------------------------
 1 | import { Suspense } from "react";
 2 | 
 3 | // Shared Components
 4 | import Spinner from "../components/spinner";
 5 | 
 6 | // Client Components
 7 | import Page from "../components/page";
 8 | import Story from "../components/story";
 9 | 
10 | // Utils
11 | import fetchData from "../lib/fetch-data";
12 | import { transform } from "../lib/get-item";
13 | import useData from "../lib/use-data";
14 | 
15 | function StoryWithData({ id }) {
16 |   const data = useData(`s-${id}`, () =>
17 |     fetchData(`item/${id}`).then(transform)
18 |   );
19 |   return <Story {...data} />;
20 | }
21 | 
22 | function NewsWithData() {
23 |   const storyIds = useData("top", () => fetchData("topstories"));
24 |   return (
25 |     <>
26 |       {storyIds.slice(0, 30).map((id) => {
27 |         return (
28 |           <Suspense key={id} fallback={<Spinner />}>
29 |             <StoryWithData id={id} />
30 |           </Suspense>
31 |         );
32 |       })}
33 |     </>
34 |   );
35 | }
36 | 
37 | export default function News() {
38 |   return (
39 |     <Page>
40 |       {typeof window === "undefined" ? (
41 |         <Spinner />
42 |       ) : (
43 |         <Suspense fallback={<Spinner />}>
44 |           <NewsWithData />
45 |         </Suspense>
46 |       )}
47 |     </Page>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/app/pages/index.js:
--------------------------------------------------------------------------------
 1 | export default function Page() {
 2 |   return (
 3 |     <div className="container">
 4 |       <h1>React Server Components in Next.js</h1>
 5 |       <h2>Without Streaming</h2>
 6 |       <section>
 7 |         <a href="/csr" target="_blank">
 8 |           Static + Client Side Data Fetching
 9 |         </a>
10 |       </section>
11 |       <section>
12 |         <a href="/ssr" target="_blank">
13 |           🐌 SSR with API Delays
14 |         </a>
15 |       </section>
16 |       <h2>React Server Components with Streaming</h2>
17 |       <section>
18 |         <a href="/rsc" target="_blank">
19 |           RSC + HTTP Streaming
20 |         </a>
21 |       </section>
22 |       <section>
23 |         <a href="/slow" target="_blank">
24 |           🐌 RSC with API Delays + HTTP Streaming
25 |         </a>
26 |       </section>
27 |       <br />
28 |       <section>
29 |         <p>
30 |           <small>
31 |             This demo is built with Next.js and React Server Components. Read
32 |             about our blog post here:{" "}
33 |             <a href="https://nextjs.org/blog/next-12" target="_blank">
34 |               Next.js 12
35 |             </a>
36 |             .
37 |           </small>
38 |         </p>
39 |         <p>
40 |           <small>
41 |             Check out the code:{" "}
42 |             <a href="https://github.com/vercel/next-rsc-demo" target="_blank">
43 |               https://github.com/vercel/next-rsc-demo
44 |             </a>
45 |           </small>
46 |         </p>
47 |       </section>
48 |       <style
49 |         dangerouslySetInnerHTML={{
50 |           __html: `
51 |             html {
52 |               height: 100%;
53 |             }
54 |             body {
55 |               display: flex;
56 |               align-items: center;
57 |               justify-content: center;
58 |               height: 100%;
59 |               margin: 0;
60 |               padding: 20px 20px 80px;
61 |               box-sizing: border-box;
62 |               color: #333;
63 |               -webkit-font-smoothing: antialiased;
64 |               font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
65 |             }
66 |             h1 {
67 |               font-size: 2em;
68 |             }
69 |             h2 {
70 |               font-size: 1.4em;
71 |               margin-top: 2em;
72 |             }
73 |             .container {
74 |               font-size: 20px;
75 |               text-align: center;
76 |             }
77 |             small {
78 |               font-size: .8em;
79 |             }
80 |             p {
81 |               margin: 10px;
82 |             }
83 |             section {
84 |               display: block;
85 |               margin: 5px 0;
86 |               text-underline-position: from-font;
87 |             }
88 |             section a {
89 |               color: #1386ff;
90 |             }`,
91 |         }}
92 |       />
93 |     </div>
94 |   );
95 | }
96 | 


--------------------------------------------------------------------------------
/app/pages/rsc.server.js:
--------------------------------------------------------------------------------
 1 | import { Suspense } from "react";
 2 | 
 3 | // Shared Components
 4 | import Spinner from "../components/spinner";
 5 | 
 6 | // Server Components
 7 | import SystemInfo from "../components/server-info.server";
 8 | 
 9 | // Client Components
10 | import Page from "../components/page";
11 | import Story from "../components/story";
12 | import Footer from "../components/footer";
13 | 
14 | // Utils
15 | import fetchData from "../lib/fetch-data";
16 | import { transform } from "../lib/get-item";
17 | import useData from "../lib/use-data";
18 | 
19 | function StoryWithData({ id }) {
20 |   const data = useData(`s-${id}`, () =>
21 |     fetchData(`item/${id}`).then(transform)
22 |   );
23 |   return <Story {...data} />;
24 | }
25 | 
26 | function NewsWithData() {
27 |   const storyIds = useData("top", () => fetchData("topstories"));
28 |   return (
29 |     <>
30 |       {storyIds.slice(0, 30).map((id) => {
31 |         return (
32 |           <Suspense fallback={<Spinner />} key={id}>
33 |             <StoryWithData id={id} />
34 |           </Suspense>
35 |         );
36 |       })}
37 |     </>
38 |   );
39 | }
40 | 
41 | export default function News() {
42 |   return (
43 |     <Page>
44 |       <Suspense fallback={<Spinner />}>
45 |         <NewsWithData />
46 |       </Suspense>
47 |       <Footer />
48 |       <SystemInfo />
49 |     </Page>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/app/pages/slow.server.js:
--------------------------------------------------------------------------------
 1 | import { Suspense } from "react";
 2 | 
 3 | // Shared Components
 4 | import Spinner from "../components/spinner";
 5 | 
 6 | // Server Components
 7 | import SystemInfo from "../components/server-info.server";
 8 | 
 9 | // Client Components
10 | import Page from "../components/page";
11 | import Story from "../components/story";
12 | import Footer from "../components/footer";
13 | 
14 | // Utils
15 | import fetchData from "../lib/fetch-data";
16 | import { transform } from "../lib/get-item";
17 | import useData from "../lib/use-data";
18 | 
19 | function StoryWithData({ id }) {
20 |   const data = useData(`s-${id}`, () =>
21 |     fetchData(`item/${id}`).then(transform)
22 |   );
23 |   return <Story {...data} />;
24 | }
25 | 
26 | function NewsWithData() {
27 |   const storyIds = useData("top", () => fetchData("topstories", 500));
28 |   return (
29 |     <>
30 |       {storyIds.slice(0, 30).map((id) => {
31 |         return (
32 |           <Suspense key={id} fallback={<Spinner />}>
33 |             <StoryWithData id={id} />
34 |           </Suspense>
35 |         );
36 |       })}
37 |     </>
38 |   );
39 | }
40 | 
41 | export default function News() {
42 |   return (
43 |     <Page>
44 |       <Suspense fallback={<Spinner />}>
45 |         <NewsWithData />
46 |       </Suspense>
47 |       <Footer />
48 |       <SystemInfo />
49 |     </Page>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/app/pages/ssr.js:
--------------------------------------------------------------------------------
 1 | import Page from "../components/page";
 2 | import Story from "../components/story";
 3 | import Footer from "../components/footer";
 4 | 
 5 | // Utils
 6 | import fetchData from "../lib/fetch-data";
 7 | import { transform } from "../lib/get-item";
 8 | 
 9 | export async function loader() {
10 |   const storyIds = await fetchData("topstories");
11 |   const data = await Promise.all(
12 |     storyIds.slice(0, 30).map((id) => fetchData(`item/${id}`).then(transform))
13 |   );
14 |   return data;
15 | }
16 | 
17 | export default function News({ data }) {
18 |   return (
19 |     <Page>
20 |       {data.map((item, i) => {
21 |         return <Story key={i} {...item} />;
22 |       })}
23 |       <Footer />
24 |     </Page>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/app/root.jsx:
--------------------------------------------------------------------------------
 1 | import { Links, LiveReload, Meta, Scripts, useLoaderData } from "remix";
 2 | import { default as News, loader } from "./pages/ssr";
 3 | import ExtraMeta from "./components/meta";
 4 | 
 5 | export { loader };
 6 | 
 7 | export default function Document() {
 8 |   return (
 9 |     <html lang="en">
10 |       <head>
11 |         <meta charSet="utf-8" />
12 |         <meta name="viewport" content="width=device-width,initial-scale=1" />
13 |         <ExtraMeta />
14 |         <Meta />
15 |         <Links />
16 |       </head>
17 |       <body>
18 |         <News data={useLoaderData()} />
19 |         <Scripts />
20 |         {process.env.NODE_ENV === "development" && <LiveReload />}
21 |       </body>
22 |     </html>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "baseUrl": ".",
4 |     "paths": {
5 |       "~/*": ["./app/*"]
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "remix-app-template-js",
 4 |   "description": "",
 5 |   "license": "",
 6 |   "scripts": {
 7 |     "build": "remix build",
 8 |     "dev": "remix dev",
 9 |     "postinstall": "remix setup node",
10 |     "start": "remix-serve build"
11 |   },
12 |   "dependencies": {
13 |     "@remix-run/react": "^1.0.6",
14 |     "@remix-run/serve": "^1.0.6",
15 |     "@remix-run/vercel": "^1.0.6",
16 |     "ms": "^2.1.3",
17 |     "react": "^17.0.2",
18 |     "react-dom": "^17.0.2",
19 |     "remix": "^1.0.6"
20 |   },
21 |   "devDependencies": {
22 |     "@remix-run/dev": "^1.0.6"
23 |   },
24 |   "engines": {
25 |     "node": ">=14"
26 |   },
27 |   "sideEffects": false
28 | }
29 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ryanflorence/remix-hn/23a3b467fad4c13ca2ed9e38225d390df30716ba/public/favicon.ico


--------------------------------------------------------------------------------
/remix.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('@remix-run/dev/config').AppConfig}
 3 |  */
 4 | module.exports = {
 5 |   appDirectory: "app",
 6 |   browserBuildDirectory: "public/build",
 7 |   publicPath: "/build/",
 8 |   serverBuildDirectory: "api/build",
 9 | };
10 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "build": {
3 |     "env": {
4 |       "ENABLE_FILE_SYSTEM_API": "1"
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------