Comments (11)
I didn't try it yet, but it should work like this with the caching example:
const express = require('express')
const next = require('next')
const routes = require('./routes')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dir: '.', dev })
const handle = app.getRequestHandler()
const LRUCache = require('lru-cache')
const ssrCache = new LRUCache({
max: 100,
maxAge: 1000 * 60 * 60 // 1hour
})
app.prepare().then(() => {
express().use(renderAndCache).listen(3000)
})
function renderAndCache (req, res) {
if (ssrCache.has(req.url)) {
return res.send(ssrCache.get(req.url))
}
// Match route + parse params
const {route, params} = routes.match(req.url)
if (!route) return handle(req, res)
app.renderToHTML(req, res, route.page, params).then((html) => {
ssrCache.set(req.url, html)
res.send(html)
})
.catch((err) => {
app.renderError(err, req, res, route.page, params)
})
}
from next-routes.
Ah nice, will try 🙂 It might be helpful to document in README the routes.match()
API.
from next-routes.
I'll do that! Let me know if you encounter any issues. Closing this for now
from next-routes.
I tried in this branch: https://github.com/relatenow/relate/tree/ssr-caching
But I get in the server:
CACHE MISS: /__webpack_hmr
CACHE MISS: /_next-prefetcher.js
CACHE HIT: /__webpack_hmr
And in the console: EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.
The __webpack_hmr
requests shouldn't hit the cache I guess, but don't know how to configure that using next-routes. Any help appreciated :)
from next-routes.
I tried adding this before checking the cache:
if (req.url === '/__webpack_hmr') {
return handle(req, res);
}
But still get
The script has an unsupported MIME type ('text/html').
Failed to load resource: net::ERR_INSECURE_RESPONSE
from next-routes.
I also think that somehow, the route('profile', '/:slug')
shouldn't match on /__webpack_hmr
. /__webpack_hmr
shouldn't match
on any user route.
from next-routes.
OK for some reason the console error doesn't appear any more (although I thought I had restarted the server to clear the cache).
The next issue is that it doesn't match on all the prefetcher routes, although this is the most important load that the server will get (most of the time, the server will only need to render when the user visits the home page, then the rest of SSR will only be triggered by the SSR requests):
Route not matched: /static/nprogress.css
Route not matched: /_next/-/commons.js
Route not matched: /_next/-/main.js
Route not matched: /_next/-/pages/
Route not matched: /_next/-/pages/discover
Route not matched: /_next/-/pages/about
Route not matched: /_next/-/pages/auth/login
Route not matched: /static/homepage/bg_TimMarshall.jpg
from next-routes.
I asked about this issue in the original PR: vercel/next.js#497 (comment)
from next-routes.
And I replied to myself 😄
Oh I keep forgetting, next-prefetcher doesn't do a pre-render, it just downloads the code.
from next-routes.
route('profile', '/:slug') shouldn't match on /__webpack_hmr
It doesn't since the catchall update from the last version, can you check?
I just updated /_next/
to /_next
in the ignored paths, so prefetcher urls won't be matched by catchall routes anymore too.
Also you can now use routes.isNextPath(req.url)
to test against the list of ignored paths. Maybe that can be helpful when integrating with the caching system.
from next-routes.
It doesn't since the catchall update from the last version, can you check?
Also you can now use routes.isNextPath(req.url)
Seems to work 👍 (sedubois/relate@f8032ba#diff-bba6db1dd9623c6662b43cc660a5975cR20)
from next-routes.
Related Issues (20)
- Click on link and URL update is not working HOT 1
- Complex { Link } from routes module doesn't work when coming from static pages, but does when navigated to first HOT 5
- next 9 with next-routes and public folder not working
- Route pushRouter makes app refresh
- Empty value for route
- Nextjs v9 - Parameter 'url' must be a string, not undefined HOT 1
- Is this library alive? HOT 22
- Refresh results in 404 page not found HOT 4
- Bug with getServerSideProps HOT 2
- Compatibility with getStaticPaths HOT 1
- Error using Link component "Warning: Function components cannot be given refs." HOT 1
- Failed to decode downloaded font
- slugs are not working with dynamic routes after upgrading to next 9.5 HOT 2
- assigning the index page to multiple routes leads to infinite reloading HOT 1
- Page Both Accessible From Route Url And NextPage Name HOT 1
- Next 10 HOT 2
- React 17.02, next js 11 HOT 2
- Migrating from next-routes to built-in Next.js routing? HOT 1
- vercel deployment with this lib
- Migration steps for nextjs inbuilt routing HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-routes.