Reduce the amount of data sent to the client (bestofjs#108)

README.md

@@ -1,4 +1,4 @@
-[![image](https://risingstars.js.org/img/2021/en/rising-stars.png)](https://risingstars.js.org/)
+[![image](https://risingstars.js.org/img/2022/en/rising-stars.png)](https://risingstars.js.org/)
 
 # JavaScript Rising Stars
 
@@ -25,7 +25,7 @@ An overview of the JavaScript landscape in 2022: trends about front-end, back0en
 
 Special thanks:
 
-- The 2021 edition of the Rising Stars was double checked by [L1lith](https://github.com/L1lith).
+- The content of 2021 and 2022 editions of the Rising Stars was double checked by [L1lith](https://github.com/L1lith).
 - [Benjamin Blackwood](https://twitter.com/B_Blackwo) was the co-author of the 2020 edition.
 - [Sacha Grief](http://sachagreif.com/) did a lot of work about the design and the content of the first editions (2016, 2017, 2018, 2019).
 

next.config.js

@@ -18,17 +18,4 @@ module.exports = {
 
     return [rootRedirect, ...yearRedirects];
   },
-  // Hack to avoid errors like `Module not found: Can't resolve 'fs'`
-  // when using helper functions that include backend code from pages
-  // see https://github.com/vercel/next.js/issues/16153#issuecomment-976216790
-  // and https://github.com/vercel/next.js/issues/27741#issuecomment-919827714
-  webpack: (config, { webpack, isServer }) => {
-    config.externals = config.externals.concat([
-      "flat",
-      "fs-extra",
-      "jdown",
-      "path",
-    ]);
-    return config;
-  },
 };

src/app-data.tsx

@@ -2,7 +2,6 @@ import { createContainer } from "unstated-next";
 
 export type AppData = {
   allYears: number[];
-  projectsBySlug: RisingStars.Entities;
   projectsByTag: RisingStars.ProjectsByCategory;
   tags: RisingStars.Tag[];
   translations: RisingStars.IntlContent;

src/components/category.tsx

@@ -5,19 +5,19 @@ import { ProjectList } from "components/project-list/project-list";
 import { TranslatedBlock } from "components/translated-block";
 import { PageProps } from "page-helpers";
 
-type Props = Pick<PageProps, "language" | "projectsByTag" | "tags" | "year"> & {
+type Props = Pick<PageProps, "language" | "tags" | "year"> & {
+  projects: RisingStars.Project[];
   category: RisingStars.Category;
 };
 export const Category = ({
   category,
   language,
-  projectsByTag,
+  projects,
   tags,
   year,
 }: Props) => {
   const { availableComments, key: tag, limit, count, guest } = category;
 
-  const projects = projectsByTag[tag];
   if (!projects) throw new Error(`No projects with the tag "${tag}"`);
   const graphProjects = projects.slice(0, count);
   const key = tag.replace(/-/gi, "");

src/components/page-root.tsx

@@ -60,7 +60,7 @@ export const PageRoot = ({
                 year={year}
                 category={category}
                 language={language}
-                projectsByTag={projectsByTag}
+                projects={projectsByTag[category.key]}
                 tags={tags}
               />
             ))}

src/components/translated-block.tsx

@@ -4,23 +4,9 @@ import get from "lodash/get";
 import { useAppData } from "app-data";
 
 export const TranslatedBlock = ({ path }: { path: string }) => {
-  const { projectsBySlug, translations } = useAppData();
+  const { translations } = useAppData();
   const markdown =
     get(translations, path) || `No translation for this path: "${path}"`;
 
-  const source = processMarkdown(projectsBySlug, markdown);
-
-  return <ReactMarkdown source={source} />;
+  return <ReactMarkdown>{markdown}</ReactMarkdown>;
 };
-
-function processMarkdown(projectsBySlug: RisingStars.Entities, md: string) {
-  const processed = md.replace(/{(.+?)}/gi, (_, slug) => {
-    const project = projectsBySlug[slug];
-    if (!project) {
-      return slug;
-    }
-    const url = project.url || project.repository;
-    return `[${project.name}](${url})`;
-  });
-  return processed;
-}

src/page-helpers.tsx

@@ -15,7 +15,6 @@ used to feed either `getStaticProps` or `getServerSideProps`
 export type PageProps = {
   allYears: number[];
   categories: RisingStars.Category[];
-  projectsBySlug: RisingStars.Entities;
   language: string;
   languages: RisingStars.Language[];
   messages: RisingStars.IntlContent;
@@ -33,16 +32,18 @@ export async function getPageProps(
 ): Promise<PageProps> {
   const projects = await getProjectData(year);
   const categories = await getCategories(year);
-  const { projectsBySlug, projectsByTag } = processProjectData(projects, categories);
+  const { projectsBySlug, projectsByTag } = processProjectData(
+    projects,
+    categories
+  );
 
-  const translations = await getTranslations(year, language);
+  const translations = await getTranslations(year, language, projectsBySlug);
   const messages = await getMessages(year, language);
 
   const allYears = settings.map(({ year: y }) => y);
   const languageCodes =
     (settings as YearSetting[]).find(({ year: y }) => y === year)?.languages ||
     [];
-  // const currentYear = settings.find(({ current }) => !!current).year;
 
   const languages = languageCodes.map((code) =>
     allLanguages.find((item) => item.code === code)
@@ -55,7 +56,6 @@ export async function getPageProps(
   return {
     year,
     language,
-    projectsBySlug,
     tags,
     projectsByTag,
     messages,
@@ -76,7 +76,7 @@ async function getCategories(year) {
   return fs.readJSON(filepath);
 }
 
-async function getTranslations(year: number, language: string) {
+async function getTranslations(year: number, language: string, projectsBySlug) {
   const i18nFolderPath = path.resolve(process.cwd(), "i18n/md");
   const i18nData = await jdown(i18nFolderPath, { parseMd: false });
 
@@ -87,12 +87,30 @@ async function getTranslations(year: number, language: string) {
   const translations = i18nData[year]
     .filter((item) => item.language === language)
     .reduce((acc, val) => {
-      acc[val.id] = val.contents;
+      const originalMarkdown = val.contents;
+      const processedMarkdown = processMarkdown(
+        projectsBySlug,
+        originalMarkdown
+      );
+      acc[val.id] = processedMarkdown;
       return acc;
     }, {});
   return translations;
 }
 
+// Replace `{slug}` placeholders with a link to the project URL
+function processMarkdown(projectsBySlug: RisingStars.Entities, md: string) {
+  const processed = md.replace(/{(.+?)}/gi, (_, slug) => {
+    const project = projectsBySlug[slug];
+    if (!project) {
+      return slug;
+    }
+    const url = project.url || project.repository;
+    return `[${project.name}](${url})`;
+  });
+  return processed;
+}
+
 async function getMessages(year: number, language: string) {
   const specificMessages = await readJSON(
     `i18n/messages/${year}/${language}.json`

src/pages/[year]/[language]/index.tsx

@@ -9,7 +9,6 @@ import { AppDataContainer } from "app-data";
 const Root = ({
   year,
   language,
-  projectsBySlug,
   projectsByTag,
   tags,
   messages,
@@ -24,7 +23,6 @@ const Root = ({
         initialState={{
           allYears,
           year,
-          projectsBySlug,
           translations,
           projectsByTag,
           tags,

src/utils/processProjectData.js

@@ -29,9 +29,9 @@ function filterByTag(sortedProjects, projectsBySlug, category) {
     return isMatchingTag(category, project);
   };
   const isExcluded = (project) => excluded && excluded.includes(project.slug);
-  return sortedProjects.filter(
-    (project) => isMatching(project) && !isExcluded(project)
-  );
+  return sortedProjects
+    .filter((project) => isMatching(project) && !isExcluded(project))
+    .slice(0, count);
 }
 
 function getProjectsByTag(sortedProjects, projectsBySlug, categories) {