Readme
Many modern websites use Next.js and Server-side Rendering (SSR) to serve their website and the data to populate it. Instead of standard API calls, this manifests in the browser as calls routed through dynamic endpoints.
This val handles the url construction and response parsing, giving you access to the endpoint and data.
- websiteUrl - The website's url, like
google.comorval.townlet getNextSSR: (websiteUrl: string) => Promise<(endpoint: string) => Promise<Record<string, any>>>
- fetching function - A function that takes in an endpoint and returns the endpoint's response data:
-
- Input
-
- endpoint - The endpoint string, like
results.jsonortrending.json?page=2
- endpoint - The endpoint string, like
-
- Returns
-
- data - The endpoint response data, without NextJS artifacts.
const fetch = await @rlesser.getNextSSR("example.com");
const data = fetch("results.json");
return data;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=5";
export let getNextSSR = async (websiteUrl: string) => {
const html = await fetchText(websiteUrl);
const staticId = html.split("/_buildManifest")[0].split("/").slice(-1)[0];
return async (endpoint: string) => {
const responseData = await fetchJSON(
`https://${websiteUrl}/_next/data/${staticId}/${endpoint}`,
);
// one possible data path is response.pageProps.ssrResponses.[some_path]
const ssrResponses = responseData?.pageProps?.ssrResponses;
if (ssrResponses == undefined) {
throw Error(
"Unexpected response structure - leave a comment with the expected structure!",
);
}
const realData = Object.values(ssrResponses)[0];
return realData as Record<string, any>;
};
};
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.