Render tab panels on server side

[mizozobu]

I would like to request a feature to render Tab.Panel on server side. My use case is to render a page to a static markup, and send it to algolia for full-text search. Currently, contents in tab panels are not rendered to a static markup, therefore not searchable.

Here is a simple snippet for SSR. MyTabs is straight from the doc.

import { renderToStaticMarkup } from 'react-dom/server';

function MyTabs() {
  return (
    <Tab.Group>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Content 1</Tab.Panel>
        <Tab.Panel>Content 2</Tab.Panel>
        <Tab.Panel>Content 3</Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  )
}

console.log(renderToStaticMarkup(MyTabs()))

Here is the output.

<div role="tablist" aria-orientation="horizontal">
  <button
    id="headlessui-tabs-tab-undefined"
    role="tab"
    type="button"
    aria-selected="false"
    tabindex="-1"
  >
    Tab 1
  </button>
  <button
    id="headlessui-tabs-tab-undefined"
    role="tab"
    type="button"
    aria-selected="false"
    tabindex="-1"
  >
    Tab 2
  </button>
  <button
    id="headlessui-tabs-tab-undefined"
    role="tab"
    type="button"
    aria-selected="false"
    tabindex="-1"
  >
    Tab 3
  </button>
</div>
<div></div>

Probably related to #778.

[antonsamper]

👍🏽 It would be great for the tab content to be server rendered!

My current workaround (which i dont really like) is to output the tab content as HTML and then hide it with CSS.

@RobinMalfait What are your thoughts on this?

[RobinMalfait]

Yep, the server side rendering of tabs (and improvements in general) are definitely coming. But I can't promise you an ETA yet. We have some other priorities and we need to setup some infrastructure to make this all work and test properly. But it's coming!