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>
    </>
  );
}

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.

StackBlitz

Sdorra - Content Collections - StackBlitz

Transform your content into type-safe data collections

SolidJS•2y ago

Sebastian Sdorra

Keep client bundle small

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>
    </>
  );
}

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>
    </>
  );
}

Content Collections

Transform your content into type-safe data collections.

StackBlitz

Sdorra - Content Collections - StackBlitz

Transform your content into type-safe data collections

Keep client bundle small

Keep client bundle small

Similar Threads

Similar Threads

Similar Threads