I’m new to SolidJS and I’ve noticed that my app is rendering twice. I suspect this is due to the way I handle routing. I’ve created a simple example to illustrate the issue:
app.tsx
import { Suspense } from "solid-js";
import { useAssets } from "solid-js/web";
import { css, renderSheets, type StyleData } from "solid-styled";
import { Router, Route } from "@solidjs/router";
import Home from './routes/index';
import NotFound from "~/routes/[...404]";
function GlobalStyles() {
css`
@global {
* {
transition: all .2s linear;
}
body {
margin: 0;
font-family: 'Montserrat', -apple-system, -system-ui, BlinkMacSystemFont,
'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 16px;
color: #292929FF;
}
a {
margin-right: 1rem;
}
main {
margin: 0 auto;
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
}
.content-wrapper {
width: calc(100vw - 350px);
height: 100%;
display: flex;
flex-direction: column;
}
input {
border: none;
outline: none;
box-shadow: none;
background-color: transparent;
}
}
`;
return null;
}
export default function App() {
return (
<Router>
<Suspense>
<Route path="/" component={Home} />
</Suspense>
</Router>
);
}
entry-client.tsx
// @refresh reload
import { render } from "solid-js/web";
import App from "./app";
// @ts-ignore
render(() => <App />, document.getElementById("app"));
entry-server.tsx
// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server";
export default createHandler(() => (
<StartServer
document={({ assets, children, scripts }) => (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
{assets}
</head>
<body>
<div id="app">{children}</div>
{scripts}
</body>
</html>
)}
/>
));
index.tsx
import { Title } from "@solidjs/meta";
import Sidebar from "~/components/Sidebar";
import Navbar from "~/components/Navbar";
export default function Home() {
return (
<main>
TEST
</main>
);
}
This is shown in the webpage:
...
<div id="app"><!--!$e0-0-0-0-0-0-0--><main data-hk="0-0-0-0-0-0-0-0-2-0-0-0-0-0-0-0">TEST</main><!--!$/e0-0-0-0-0-0-0--><main>TEST</main></div>
As shown in the rendered output, the element appears twice. What could be causing this duplication and how can I resolve it?
Thanks in advance!