my blog https://overreacted.io
tweak
+2
-2
+2
-2
public/the-two-reacts/index.md
+2
-2
public/the-two-reacts/index.md
···
127
127
All I needed to do was to render a `<PostPreview />` for every post folder:
128
128
129
129
```js
130
-
import { PostPreview } from "./post-preview";
131
130
import { readdir } from "fs/promises";
131
+
import { PostPreview } from "./post-preview";
132
132
133
133
export async function PostList() {
134
134
const entries = await readdir("./public/", { withFileTypes: true });
···
161
161
162
162
**Running my components close to their data source lets them read their own data and preprocess it _before_ sending any of that information to your device.**
163
163
164
-
By the time that you load this page, there is no `<PostList>`, `<PostPreview>`, `fileContent`, or `dirs`. There is only a `<div>` with some `<section>`s and `<a>`s and `<i>`s inside each of them. Your device only receives *the UI it needs to display* (the rendered post titles, link URLs, and post word counts) rather than *the raw data* that your components used to compute that UI (the actual posts).
164
+
By the time you loaded this page, there was no more `<PostList>` and no more `<PostPreview>`, no `fileContent` and no `dirs`, no `fs` and no `gray-matter`. Instead, there was only a `<div>` with a few `<section>`s with `<a>`s and `<i>`s inside each of them. Your device only received *the UI it actually needs to display* (the rendered post titles, link URLs, and post word counts) rather than *the full raw data* that your components used to compute that UI from (the actual posts).
165
165
166
166
With this mental model, *the UI is a function of server data*, or `UI = f(data)`. That data only exists *my* device, so that's where the components should run.
167
167