SolidJSS
SolidJS•16mo ago
Sebastian Sdorra

Keep client bundle small

Hi all, I'm new to Solid and SolidStart, but I'm building a library with support for SolidStart, and I want to be sure that I get the sample right.

In a nutshell, my library (https://content-collections.dev) collects markdown, YAML, and JSON files and turns them into JavaScript arrays that can be imported anywhere. However, the problem with that approach is that the created array could be very large, especially for apps with many markdown files. So, I want to ensure that only the required content is loaded. After looking at the SolidStart documentation, I found that I can use cache/"use server"/createAsync to load only the required data from the server.

import { cache, createAsync, RouteDefinition } from '@solidjs/router';
import { allPosts } from 'content-collections';
import { For } from 'solid-js';

const getPosts = cache(async () => {
  'use server';

  return allPosts
    .map((post) => ({
      slug: `/posts/${post._meta.path}`,
      title: post.title,
      summary: post.summary
    }));
}, 'posts');

export const route = {
  load: () => getPosts(),
} satisfies RouteDefinition;

export default function App() {
  const posts = createAsync(() => getPosts());

  return (
    <>
      <h2>Posts</h2>
      <div class="posts">
        <For each={posts()}>
          {(post) => (
            <a href={post.slug}>
              <h3>{post.title}</h3>
              <p>{post.summary}</p>
            </a>
          )}
        </For>
      </div>
    </>
  );
}


But this seems to break HMR for the generated JavaScript file, which works fine if I just use the imported data. Here is a StackBlitz link to the complete sample:

https://stackblitz.com/github/sdorra/content-collections/tree/feature/improve_solid_support/samples/solid?file=src/routes/index.tsx

So now, to my question: is this the right approach to keep the client bundle small? And is there a way to get HMR back?
Content Collections
Transform your content into type-safe data collections.
Content Collections
StackBlitz
Sdorra - Content Collections - StackBlitz
Transform your content into type-safe data collections
Sdorra - Content Collections - StackBlitz
Was this page helpful?