Solid Core Advanced Components

Advanced Components

SuspenseList

Coordinates multiple parallel Suspense and SuspenseList components. Controls reveal order to reduce layout thrashing.

import { SuspenseList } from "solid-js";

<SuspenseList revealOrder="forwards" tail="collapsed">
  <ProfileDetails user={resource.user} />
  <Suspense fallback={<h2>Loading posts...</h2>}>
    <ProfileTimeline posts={resource.posts} />
  </Suspense>
  <Suspense fallback={<h2>Loading fun facts...</h2>}>
    <ProfileTrivia trivia={resource.trivia} />
  </Suspense>
</SuspenseList>

Props

revealOrder: "forwards" | "backwards" | "together"

• "forwards" (default): Reveals each item once previous item finished rendering
• "backwards": Reveals each item once next item finished rendering
• "together": Reveals all items at the same time

tail: "collapsed" | "hidden" (optional)

• Controls fallback display behavior

Use Cases

• Coordinating multiple async sections
• Preventing layout shift
• Controlling loading sequence
• Managing parallel data fetching

Note: SuspenseList is experimental and doesn't have full SSR support yet.

NoHydration

Prevents client-side hydration for its children. Useful for static content that doesn't need reactivity.

import { NoHydration } from "solid-js/web";

function Example() {
  return (
    <div>
      <InteractiveComponent />
      <NoHydration>
        <StaticContent />
      </NoHydration>
    </div>
  );
}

Behavior:

• Renders normally on server (contributes to HTML)
• Skips hydration on client (no event listeners, no reactive state)
• Reduces bundle size and improves performance

Use cases:

• Static content (markdown, documentation)
• Server-only rendered sections
• Performance optimization for non-interactive content
• Reducing client-side JavaScript

Important:

• Content inside <NoHydration> is not hydrated on the client
• Reactive updates and event handlers won't run in that subtree on the client
• Use <Hydration> to resume hydration for interactive islands when needed

Best Practices

1. SuspenseList:

   • Use to coordinate multiple Suspense boundaries
   • Choose revealOrder based on UX needs
   • Consider layout stability when choosing order

2. NoHydration:

   • Use for truly static content
   • Don't use for interactive components
   • Reduces client-side overhead significantly