Bozhidar Posts - Answer Overflow

Bozhidar

•Created by Bozhidar on 4/15/2025 in #questions

Best way to render "statically-known" dynamic data in Next?

In the pursuit of creating the fastest possible page load experience, I keep running into this dilema on how to optimize this specific case and I'm curious to see how y'all would approach it: I have a page that renders a list of statically known items, which are known at build time. NextJS does a great job of realizing this and statically rendering the page, caching on the CDN when deployed to prod. However, I need the otherwise static list to be shuffled differently on every page reload. The list in question is above the page fold and immediately visible to the user when they open the page. I don't want the shuffling to slow down the page load or cause layout shifts and flashes, if possible. I believe my options are: 1. Force the page to be dynamic, render in NodeJS. The benefit here is that I am making minimal code changes and no client-side JS is being sent to shuffle/resolve timer after hydration - the HTML already has the items in the right order! However I don't want to spin up a Lambda and wait for its cold start just to shuffle an array and I think this certainly degrades load performance. I considered using const revalidate = 0, but I am not sure if this is the best way to achieve this. 2. Dynamically render on the edge. I think this fixes the performance of serverless NodeJS, but I have the impression that using the edge runtime for rendering has been considered an anti-pattern lately 3. Statically render unshuffled list, shuffle it on the client. This causes the order to flash quickly after each reload on the client, but it enables me to cache the page on the CDN, lowering the TTFB. 4. Statically render loading state, replace with shuffled content on the client. This fixes the confusing "flash of unsorted list", but it possibly hides that content from search engines indexing this page and this content is important for SEO. If you had to make a snappy UX, which trade-offs would you prefer to make and is there a better solution I am missing?

2 replies

TTCTheo's Typesafe Cult

•Created by Bozhidar on 3/5/2023 in #questions

Astro extension doesn't use `prettier-plugin-tailwindcss` when formatting

Ran into a weird issue when setting up automatic Tailwind class sorting inside a pnpm-based Astro project. I tried to resolve it, but I was unable to find a solution myself; could anyone point me in the right direction, please 🥺 I have prettier and prettier-plugin-tailwindcss installed as devDependencies:

{
  "devDependencies": {
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.4"
  }
}

{
  "devDependencies": {
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.4"
  }
}

I am using prettier-plugin-{astro,tailwindcss} inside my prettier.config.cjs, configured as the docs (https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins) say:

{
  plugins: [
    require.resolve("prettier-plugin-astro"),
    require.resolve("prettier-plugin-tailwindcss"), // last
  ],
  pluginSearchDirs: false,
}

{
  plugins: [
    require.resolve("prettier-plugin-astro"),
    require.resolve("prettier-plugin-tailwindcss"), // last
  ],
  pluginSearchDirs: false,
}

And formatting with Prettier CLI works:

$ pnpm exec prettier --write src/pages/foo.astro

$ pnpm exec prettier --write src/pages/foo.astro

However, when I format the code inside VSCode using the Astro extension, it only pretty prints the code, but doesn't sort Tailwind classes. I can't use the Prettier extension as a formatter, because it cannot format 'Astro'-files. This is a big annoyance, since I'm used to classes auto sorting on save, so it's painful having to run prettier in a terminal. Is this a configuration problem, or is it an issue with the Astro extension?

3 replies

Gaming

Programming