NextJS и React: Как я могу вернуть страницы с сервера? - PullRequest
Новая
       33

NextJS и React: Как я могу вернуть страницы с сервера?

0 голосов
/ 01 октября 2018

Для моего сайта я использую React и NextJS.У меня есть собственный сервер.Мой server.js выглядит следующим образом: 

const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

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

    server.post('/', (req, res) => {
            if (req.body.code === 'DE') {
                return server.render(req, res, '/de/', req.query)
            }
        })

    server.get('*', (req, res) => {
      return handle(req, res)
    })

    server.listen(3000, (err) => {
            if (err) throw err
            console.log('> Ready on http://localhost:3000')
        })
    })
    .catch((ex) => {
        console.error(ex.stack)
        process.exit(1)
  })

Функция server.post используется для проверки, является ли клиент из Германии или нет.Если клиент прибывает из Германии, файл index.js должен быть возвращен из каталога /pages/de/.

. На стороне клиента я использую функцию componentDidMount(), чтобы определить страну клиента и отправить эту информацию.на сервер: 

//located in: /pages/index.js

class Component extends Component {


  componentDidMount() {
        axios.get('https://api.ipdata.co/?api-key=XXXXXXXXX')
        .then(function (response) {
            const countryCode = response.data.country_code;
            console.log(countryCode);
            fetch('/', {
                method: 'POST',
                headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify({code:countryCode}),
              })
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    render() {     //Is an example
      return(
       <div></div>
      );
    }
}

Моя проблема: я могу получить доступ к CountryCode на стороне сервера с помощью req.body.code, но не могу вернуть /pages/de/index.js.

Два вопроса:

  • Где моя ошибка?
  • Правильно ли для этой цели использовать функцию ComponentdidMount(), или мне лучше создатькастом _app.js для него?И если да, то как я могу это сделать?

У меня мало опыта в средах Node.js.Я был бы очень признателен, если бы вы могли показать мне конкретные решения.Спасибо за ваши ответы.

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Я думаю, что вы должны перенаправить пользователя на "/ de /", используя res.redirect ('/ de') на сервере, или вы можете сделать это в getInitialProps, чтобы сделать вашу логику в одном месте, особенно если вам нужноПеренаправление также на стороне браузера (используя next / Router.push ()).

Кроме того, если есть возможность поместить ключ в куки, я думаю, что лучше проверить местоположение до того, как страница будет отображена, поэтомупользователь не видит перенаправление.

0 голосов
/ 16 октября 2018

Ваш код на стороне клиента находится внутри pages / index.js вместо pages / de / index.js this.Если вы хотите получить доступ к коду из pages / index.js , определите приведенный ниже код в server.js 

server.post('/', (req, res) => {
    if (req.body.code === 'DE') {
        return server.render(req, res, '/', req.query)
    }
})
...