How to use the mobx-react.useStaticRendering function in mobx-react

To help you get started, we’ve selected a few mobx-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github zeit / next.js / examples / with-mobx / store.js View on Github external
import { action, observable } from 'mobx'
import { useStaticRendering } from 'mobx-react'

const isServer = typeof window === 'undefined'
// eslint-disable-next-line react-hooks/rules-of-hooks
useStaticRendering(isServer)

export class Store {
  @observable lastUpdate = 0
  @observable light = false

  hydrate(serializedStore) {
    this.lastUpdate =
      serializedStore.lastUpdate != null
        ? serializedStore.lastUpdate
        : Date.now()
    this.light = !!serializedStore.light
  }

  @action start = () => {
    this.timer = setInterval(() => {
      this.lastUpdate = Date.now()
github coderplanets / coderplanets_web / server.js View on Github external
const LRUCache = require('lru-cache')
const helmet = require('helmet')
const mobxReact = require('mobx-react')
const R = require('ramda')
// inspect graphql model
const { express: voyagerMiddleware } = require('graphql-voyager/middleware')

const CONFIG = require('./config/config.json')

const app = next({ dev, quiet: false })
const handle = app.getRequestHandler()
const SERVE_PORT = process.env.SERVE_PORT || 3000
const HOME_PAGE = '/home/posts'

// SSR for mobx
mobxReact.useStaticRendering(true)

// This is where we cache our rendered HTML pages
const ssrCache = new LRUCache({
  max: 1000, // cache item count
  // maxAge: 1000 * 60 * 60, // 1hour
  maxAge: 1000 * 30, // 30 ses
})

app.prepare().then(() => {
  const server = express()
  /* eslint-disable-next-line */
  const { Sentry } = require('./src/services/sentry')({ release: app.buildId })

  server.use(Sentry.Handlers.requestHandler())
  server.use(cookieParser())
  server.use(responseTime())
github async-labs / saas / book / 12-begin / app / server / app.ts View on Github external
import './env';

import * as express from 'express';
import * as helmet from 'helmet';
import * as mobxReact from 'mobx-react';
import * as next from 'next';
import * as path from 'path';

import { getUser } from '../lib/api/public';
import routesWithSlug from './routesWithSlug';

import { IS_DEV, PORT_APP, URL_APP } from '../lib/consts';

mobxReact.useStaticRendering(true);

const app = next({ dev: IS_DEV });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // give all Nextjs's request to Nextjs before anything else
  server.get('/_next/*', (req, res) => {
    handle(req, res);
  });

  server.get('/static/*', (req, res) => {
    handle(req, res);
  });
github nightwolfz / mobx-starter / server / middleware / render.js View on Github external
import React from 'react'
import { renderToStaticMarkup } from 'react-dom/server'
import { StaticRouter } from 'react-router'
import { useStaticRendering } from 'mobx-react'
import Html from '../../src/components/common/Html'

useStaticRendering(true)

// Server-side render
export default async(ctx, next) => {

  const context = {}

  const html = 
    
  

  // context.url will contain the URL to redirect to if a  was used
  if (context.url) {
    ctx.redirect(context.url)
    ctx.body = 'redirecting'
    return await next()
  }
github async-labs / saas / book / 10-begin / app / server / app.ts View on Github external
import './env';

import express from 'express';
import helmet from 'helmet';
import * as mobxReact from 'mobx-react';
import next from 'next';
import * as path from 'path';

import { getUser } from '../lib/api/public';
import routesWithSlug from './routesWithSlug';

import { IS_DEV, PORT_APP, URL_APP } from '../lib/consts';

mobxReact.useStaticRendering(true);

const app = next({ dev: IS_DEV });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // give all Nextjs's request to Nextjs before anything else
  server.get('/_next/*', (req, res) => {
    handle(req, res);
  });

  server.get('/static/*', (req, res) => {
    handle(req, res);
  });
github async-labs / saas / book / 4-end / app / server / app.ts View on Github external
import './env';

import express from 'express';
import helmet from 'helmet';
import * as mobxReact from 'mobx-react';
import next from 'next';
import * as path from 'path';

import { getUser } from '../lib/api/public';

// 10
// import routesWithSlug from './routesWithSlug';

import { IS_DEV, PORT_APP, URL_APP } from '../lib/consts';

mobxReact.useStaticRendering(true);

const app = next({ dev: IS_DEV });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // give all Nextjs's request to Nextjs before anything else
  server.get('/_next/*', (req, res) => {
    handle(req, res);
  });

  server.get('/static/*', (req, res) => {
    handle(req, res);
  });
github topheman / nextjs-movie-browser / src / stores / index.ts View on Github external
import { useStaticRendering } from "mobx-react";

const isServer = typeof window === "undefined";
useStaticRendering(isServer);

import TranslationsStore, {
  TranslationsStoreInitialState
} from "./TranslationsStore";
import UIStore from "./UIStore";

export interface MyMobxStore {
  translationsStore?: TranslationsStore;
  uiStore?: UIStore;
}
// ⚠️ TODO fix mixup between store / initialState
export const createStore = (
  initialState: {
    translationsStore?: TranslationsStoreInitialState;
  } = {}
): MyMobxStore => {
github OrangeXC / gank / server / index.js View on Github external
const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'

const { createServer } = require('http')
const { join } = require('path')
const { parse } = require('url')
const next = require('next')
const mobxReact = require('mobx-react')

const app = next({ dev })
const handle = app.getRequestHandler()

mobxReact.useStaticRendering(true)

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    const ua = req.headers['user-agent']

    if (pathname === '/service-worker.js') {
      const filePath = join(__dirname, '.next', pathname)

      app.serveStatic(req, res, filePath)
    } else if (pathname.startsWith('/static')) {
      handle(req, res, parsedUrl)
    } else if (/Mobile/i.test(ua) && !pathname.startsWith('/m')) {
      const mobilePathname = pathname === '/' ? '/m' : `/m${pathname}`
github easy-team / egg-react-typescript-boilerplate / app / web / page / home / index.tsx View on Github external
function bootstrap() {
  if (EASY_ENV_IS_NODE) {
    useStaticRendering(true);
    return App;
  }
  const stores = window.stores = window.stores || {
    configStore: new ConfigStore()
  };
  const state = window.__INITIAL_STATE__;
  const root = document.getElementById('app');
  if (EASY_ENV_IS_DEV) {
    ReactDOM.hydrate(, root);
    if (module.hot) {
      module.hot.accept();
    }
  } else{
    ReactDOM.hydrate(, root);
  }
}