• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
Guides Server-side rendering
(external link)

Server-side rendering #

Custom elements should be defined on client-side only. There are a couple of things you can do to ensure this.

You can implement a condition which checks for the environment such as the following one:

import { LdButton } from '@emdgroup-liquid/liquid/dist/components/ld-button'

if (typeof window !== 'undefined') {
customElements.define('ld-button', LdButton)
}

You can also import the components you use on client side only, if you want to leverage code splitting and lazy loading:

if (typeof window !== 'undefined') {
const { setAssetPath } = await import('@emdgroup-liquid/liquid/dist/components')
const modules = await Promise.all([
import('@emdgroup-liquid/liquid/dist/components/ld-button'),
import('@emdgroup-liquid/liquid/dist/components/ld-checkbox'),
])
window.__LD_ASSET_PATH__ = window.location.origin
modules.forEach((module) => {
module.defineCustomElement()
})
}

If you have lifecycle hooks to your disposal for running code on the client side only, you should use these. For instance, in React based applications you can use the effect hook for this purpose:

useEffect(()=>{
window.__LD_ASSET_PATH__ = window.location.origin
}, [])

For working examples check out our sandbox apps.