How to display data from ssrContext in a component?

[sergeykorobeynikov]

Example:

<script setup lang="ts">
import { useSSRContext } from 'vue';
const ssrContext = process.env.SERVER ? useSSRContext() : null;
let msg: string = ssrContext?.req.headers['host'] ?? 'empty';
console.debug(msg);
</script>

<template>Headers: {{ msg }}</template>

This code will generate localhost:3000 in the console and empty in the browser.
It looks like this component is rendered in the browser itself, and there is also some code running on the server.