lukeed / preact-cli-ssr Goto Github PK

View Code? Open in Web Editor NEW

79.0 4.0 9.0 102 KB

A quick demo for adding SSR to a Preact CLI app

Home Page: https://preact-cli-ssr.now.sh/

License: MIT License

JavaScript 74.55% CSS 25.45%

preact preact-cli preact-demos ssr express

preact-cli-ssr's Introduction

Preact CLI SSR Demo

A quick demo that illustrates how to add SSR to a Preact CLI app

This demo was built with preact-cli, using the default template.

It's powered by an Express server with gzip compression... nothing special there.

Because of how preact-cli produces the build directory, the server must respect static/file requests first. This also means that your build/index.html will always be served on the / request. This isn't a bad thing, it's just something to be aware of!

Important: This server behaves exactly like Preact CLI's prerendering. This means that if you (or your libraries) have references to window or document, you must wrap them in conditional statements or include a shim.

Install

$ git clone https://github.com/lukeed/preact-cli-ssr
$ npm install
$ npm run build
$ npm start

License

MIT © Luke Edwards

preact-cli-ssr's People

Contributors

Stargazers

Watchers

Forkers

redstrike suwa-yuki bradlc mfbx9da4 ianfeather shivam2498 ansgit tumme

preact-cli-ssr's Issues

How to SSR the <head> dynamically?

Hello, is there a way to handle the <head></head> tag dynamically(title, description, meta, etc)? Or even just set it up the first load time.

Flickering on first load

Hi, @lukeed, once any of the routes are rendered for the first time the content would flicker, especially on smaller networks.

Is there any way to fix this issue?

import src/components in server

Hi,
I want to use preact components in server.js instead of ssr-build. Is it possible to use preact-cli for this? Or I need to write own webpack/babel configurations for that?

render double html markup or mounted app twice at initial rendering

hello sir,
i am working on a project which is based upon this repo I have additional package unistore and i warap it into index.js

`let store = createStore(initialState)
if(typeof window !== "undefined"){
store = (window.STATE && window.STATE !== "==InitialState==") ? createStore(window.STATE) : createStore(initialState)
}
const App = ({url, Serverstore}) => {
let Finalstore = (Serverstore && typeof Serverstore !== "undefined") ? Serverstore : store
return(

)
}

export default App`

in my server.js I have added

let store = createStore(initialState) let state = store.getState() let body = render(h(App, { url: req.url, Serverstore: store }))

initial state on the server side and client side are same. when I run the application on development server it's run smoothly. but when I deploy it on the production server it's inserted client-side app below the SSR markup only on initial rendering when I reload the app double markup removed and run as expected. please help

Doesn't register Service Worker

I have tried the starter, but couldn't manage to get the app to register SW in ssr mode. It registers SW in client only mode as expected.

server Not render the expected page

Hi, it looks like server just render home page, then route to the page which user real visit to by JavaScript in browser. Expectation is the server render the page visit to by user, some help?

let url = req.url;
let body = render(h(App, { url }));

here, bodycan't get the correct page structure to which the url points, it's designed like this or Preact bug ?

lukeed / preact-cli-ssr Goto Github PK

preact-cli-ssr's Introduction

Preact CLI SSR Demo

Install

License

preact-cli-ssr's People

Contributors

Stargazers

Watchers

Forkers

preact-cli-ssr's Issues

How to SSR the <head> dynamically?

Flickering on first load

import src/components in server

render double html markup or mounted app twice at initial rendering

Doesn't register Service Worker

server Not render the expected page

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent