@storybook/server

What is @storybook/server?

@storybook/server is a Storybook addon that allows you to integrate server-rendered components into your Storybook environment. It is particularly useful for testing and developing components that rely on server-side data or rendering.

What are @storybook/server's main functionalities?

Server-rendered components

This feature allows you to add server-rendered components to your Storybook. The code sample demonstrates how to define a story for a server-rendered component using the `storiesOf` API.

import { storiesOf } from '@storybook/server';

storiesOf('ServerComponent', module)
  .add('default', () => {
    return {
      template: '<div>Server-rendered content</div>',
      context: { /* server-side context */ }
    };
  });

Integration with server-side data

This feature allows you to integrate server-side data into your components. The code sample shows how to pass server-side data to a component in Storybook.

import { storiesOf } from '@storybook/server';

storiesOf('DataComponent', module)
  .add('with data', () => {
    return {
      template: '<div>{{data}}</div>',
      context: { data: 'Server-side data' }
    };
  });

Other packages similar to @storybook/server

storybook-addon-next

storybook-addon-next is an addon for Storybook that provides support for Next.js applications. It allows you to render Next.js pages and components within Storybook, similar to how @storybook/server handles server-rendered components. However, it is specifically tailored for Next.js, whereas @storybook/server is more generic.

storybook-addon-apollo-client

storybook-addon-apollo-client is an addon that integrates Apollo Client with Storybook, allowing you to mock GraphQL queries and mutations. While @storybook/server focuses on server-rendered components, storybook-addon-apollo-client is more about integrating GraphQL data fetching into your Storybook stories.

README

Storybook Server renderer